More consistent across screen sizes

espeon · Nov 4, 2024 · dec7da4 · dec7da4
1 parent 55a4e89
commit dec7da4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -183,11 +183,11 @@ const App: React.FC = () => {
                       <div className="w-full pt-2">
                         <ScrollingText
                           text={songData.track_name}
-                          className="drop-shadow-lg text-2xl"
+                          className="drop-shadow-lg text-2xl lg:text-4xl xl:text-5xl"
                         />
                         <ScrollingText
                           text={songData.artist}
-                          className="text-2xl"
+                          className="text-2xl lg:text-4xl xl:text-5xl"
                         />
                       </div>
                     )}
@@ -205,21 +205,21 @@ const App: React.FC = () => {
                       <>
                         <ScrollingText
                           text={songData.track_name}
-                          className="drop-shadow-lg text-4xl"
+                          className="drop-shadow-lg text-4xl lg:text-6xl xl:text-7xl"
                         />
                         {songData.album !== songData.track_name ? (
                           <>
                             <ScrollingText
                               text={songData.artist}
-                              className="text-3xl"
+                              className="text-3xl lg:text-5xl xl:text-6xl"
                             />
                             <ScrollingText
                               text={songData.album}
-                              className="text-3xl"
+                              className="text-3xl lg:text-5xl xl:text-6xl"
                             />
                           </>
                         ) : (
-                          <ScrollingText text={songData.artist} className="text-3xl" />
+                          <ScrollingText text={songData.artist} className="text-3xl lg:text-5xl xl:text-6xl" />
                         )}
                         <div className="text-xl font-mono flex">
                         {s2t(trackProgress.currentTime)}

diff --git a/src/components/basicLyrics.tsx b/src/components/basicLyrics.tsx
@@ -41,7 +41,7 @@ export default function BasicLyrics({
         return (
           <div
             key={String(i) + line.text}
-            className={`w-max max-w-full text-wrap transition-transform bg-transparent duration-0 mb-2 md:mb-4 lg:mb-8 py-2 text-left origin-left text-3xl md:text-4xl lg:text-5xl xl:text-6xl ${
+            className={`w-max max-w-full text-wrap transition-transform bg-transparent duration-0 mb-2 md:mb-4 lg:mb-10 xl:mb-12 py-2 text-left origin-left text-3xl md:text-4xl lg:text-6xl xl:text-7xl ${
               segStatus.isActive ? "scale-100" : "scale-90"
             }`}
             // style={styles}

diff --git a/src/index.css b/src/index.css
@@ -90,4 +90,5 @@ button {
 :base,
 * {
   @apply transition-all duration-300 mix-blend-color;
+  font-optical-sizing: none;
 }