animate in, motion-safe only

_includes/base-header.html

@@ -42,7 +42,7 @@
         {%- for navItem in navigation -%}
           <a
             href="{{navItem.url}}"
-            class="transition-colors {% if page.url == navItem.url %} border-mauve text-mauve {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium outline-link"
+            class="motion-safe:transition-colors {% if page.url == navItem.url %} border-mauve text-mauve {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium outline-link"
             {% if page.url == navItem.url %}aria-current="page"{% endif %}
           >
             {{navItem.title}}

_includes/category.njk

@@ -13,8 +13,8 @@
 
     <div class="mt-6 pt-10 grid gap-8 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
       {%- for content in collections[ page.fileSlug ] | reverse -%}
-        <div>
-          <a href="{{ content.url }}" class="bg-base/75 px-5 pt-3 pb-px transition block outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
+        <div class="motion-safe:animate-fade-up motion-safe:animate-delay-[{{loop.index * 100}}ms] animate-once">
+          <a href="{{ content.url }}" class="bg-base/75 px-5 pt-3 pb-px motion-safe:transition-colors block outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
             <h3 class="text-xl font-semibold text-subtext0 underline">
               {{ content.data.title }}
             </h3>

_includes/pinned.njk

@@ -13,13 +13,13 @@
 
     <div class="mt-16 grid gap-16 pt-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
       {%- for content in collections.pinned | reverse -%}
-        <div>
+      <div class="motion-safe:animate-fade-up motion-safe:animate-delay-[{{loop.index * 100}}ms] animate-once">
           <div>
-            <a href="/{{ content.data.tags[0] }}/" class="transition-colors inline-block outline-link underline inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:text-sky hover:bg-base">
+            <a href="/{{ content.data.tags[0] }}/" class="motion-safe:transition-colors inline-block outline-link underline inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:text-sky hover:bg-base">
               {{ content.data.tags[0] | capitalize }}
             </a>
           </div>
-          <a href="{{ content.url }}" class="transition block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
+          <a href="{{ content.url }}" class="motion-safe:transition-colors block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
             <h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
               <span class="absolute z-10 inset-3">{{ content.data.title }}</span>
               <img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />

package-lock.json

@@ -27,7 +27,8 @@
         "npm": "^10.5.0",
         "postcss": "^8.3.11",
         "postcss-cli": "^9.0.1",
-        "tailwindcss": "^3.4.1"
+        "tailwindcss": "^3.4.1",
+        "tailwindcss-animated": "^1.0.1"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -9956,6 +9957,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animated": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.0.1.tgz",
+      "integrity": "sha512-u5wusj89ZwP8I+s8WZlaAd7aZTWBN/XEG6QgMKpkIKmAf3xP1A6WYf7oYIKmGaB10UAQaSqWopi/i1ozzZEs8Q==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=3.1.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -17188,6 +17198,13 @@
         }
       }
     },
+    "tailwindcss-animated": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.0.1.tgz",
+      "integrity": "sha512-u5wusj89ZwP8I+s8WZlaAd7aZTWBN/XEG6QgMKpkIKmAf3xP1A6WYf7oYIKmGaB10UAQaSqWopi/i1ozzZEs8Q==",
+      "dev": true,
+      "requires": {}
+    },
     "terser": {
       "version": "5.29.2",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz",

package.json

@@ -45,7 +45,8 @@
     "npm": "^10.5.0",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.1",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animated": "^1.0.1"
   },
   "dependencies": {
     "@toycode/markdown-it-class": "^1.2.4"

tailwind.config.js

@@ -13,5 +13,6 @@ module.exports = {
   },
   plugins: [
     require("@catppuccin/tailwindcss"),
+    require("tailwindcss-animated"),
   ],
 }