Only colour numbers when animating header + auto-animate on mobile

cyrus01337 · Jun 25, 2024 · 419db71 · 419db71
1 parent 22c769e
commit 419db71
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/github.astro b/src/components/github.astro
@@ -3,7 +3,7 @@
     href="https://github.com/cyrus01337/cyrus01337.co.uk"
 >
     <img
-        class="transition-size h-8 w-8 rounded-full border-2 border-black bg-black shadow-md duration-300 group-active:h-7 group-active:w-7 lg:group-hover:h-10 lg:group-hover:w-10"
+        class="transition-size h-8 w-8 rounded-full border-2 border-base-content bg-base-content shadow-md duration-300 group-active:h-7 group-active:w-7 lg:group-hover:h-10 lg:group-hover:w-10"
         src="/github.svg"
     />
 </a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -11,11 +11,11 @@ import Layout from "@/layouts/base.astro";
         <div class="hero-content flex flex-col text-center">
             <div class="w-fit max-w-md">
                 <div
-                    class="group flex w-full select-none flex-row justify-center text-5xl font-bold transition-colors duration-600 hover:cursor-default hover:text-primary"
+                    class="group flex w-full select-none flex-row justify-center text-5xl font-bold lg:hover:cursor-default"
                 >
                     <h1>Cyrus</h1>
                     <h1
-                        class="shrink basis-0 overflow-hidden transition-flex-basis duration-600 group-hover:basis-1/2"
+                        class="animate-display-numbers delay-1500 shrink overflow-hidden lg:basis-0 lg:animate-none lg:transition-flex-basis lg:delay-0 lg:duration-700 lg:group-hover:basis-1/2 lg:group-hover:text-primary"
                     >
                         01337
                     </h1>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,14 +9,29 @@ export default {
     },
     theme: {
         extend: {
+            animation: {
+                "display-numbers": "display-numbers 6s ease-in-out infinite",
+            },
             brightness: {
                 30: "0.30",
             },
             fontFamily: {
                 sans: ["Inter Tight Variable", ...defaultTheme.fontFamily.sans],
             },
-            transitionDuration: {
-                600: "600ms",
+            keyframes: {
+                "display-numbers": {
+                    "0%, 80%, 100%": {
+                        "flex-basis": 0,
+                        color: "oklch(var(--bc))",
+                    },
+                    "20%, 60%": {
+                        "flex-basis": "50%",
+                        color: "oklch(var(--p))",
+                    },
+                },
+            },
+            transitionDelay: {
+                1500: "1500ms",
             },
             transitionProperty: {
                 filter: "filter",