fix(home): fit text of spotify card on grid

mateusfg7 · May 23, 2024 · 2a91848 · 2a91848
1 parent 909caa9
commit 2a91848
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src/app/_components/grid/cards/most-listened-music.tsx b/src/app/_components/grid/cards/most-listened-music.tsx
@@ -22,13 +22,15 @@ export async function MostListenedMusic() {
         size="1em"
         className="absolute left-0 top-0 text-[50px] text-red-800"
       />
-      <div className="relative z-0 mb-10 ml-8 mt-11 -rotate-90 font-extrabold leading-none text-white">
-        <span className="absolute left-0 top-1 truncate text-xl opacity-20">
-          {artist.name}
-        </span>
-        <div className="truncate">{title}</div>
-        <div className="absolute truncate text-xs font-normal">
-          Top listened this month
+      <div className="absolute bottom-0 right-5 top-0">
+        <div className="side-text relative z-0 h-full font-extrabold leading-none text-white">
+          <span className="absolute h-fit max-h-full truncate text-xl opacity-30">
+            {artist.name}
+          </span>
+          <div className="truncate">{title}</div>
+          <div className="truncate text-xs font-normal">
+            Top listened this month
+          </div>
         </div>
       </div>
       <Image
@@ -41,7 +43,7 @@ export async function MostListenedMusic() {
       <Image
         src={cover.url}
         alt={title!}
-        className="absolute -bottom-12 -left-16 overflow-hidden rounded-full"
+        className="absolute -bottom-12 -left-16 animate-spin overflow-hidden rounded-full animate-duration-[120s]"
         placeholder="empty"
         width={200}
         height={200}

diff --git a/src/styles/utilities.css b/src/styles/utilities.css
@@ -5,7 +5,7 @@
     @apply w-full px-4 md:max-w-4xl lg:px-0;
   }
   .content-vertical-spaces {
-    @apply pt-24 pb-28 md:pt-36;
+    @apply pb-28 pt-24 md:pt-36;
   }
 
   .limits {
@@ -14,7 +14,11 @@
   }
 
   .shine {
-    @apply absolute top-0 left-0 h-full w-1/3 -translate-x-full -skew-x-20;
+    @apply absolute left-0 top-0 h-full w-1/3 -translate-x-full -skew-x-20;
     @apply bg-white/0 bg-gradient-to-r from-white/0 via-white/30 to-white/0 text-white/0 dark:via-white/10;
   }
+
+  .side-text {
+    @apply scale-flip [writing-mode:vertical-rl];
+  }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -129,6 +129,9 @@ const config: Config = {
           '75%': { background: colors.red['600'] },
           '100%': { background: colors.blue['600'] }
         }
+      },
+      scale: {
+        flip: '-1'
       }
     },
     keyframes: {