header animations

_includes/blog-list.njk

@@ -2,11 +2,11 @@
 
 <main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
   <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
-    <div>
-      <h1 class="text-5xl tracking-tight text-pink fancy-heading">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-5xl tracking-tight text-pink fancy-heading inline-block motion-safe:animate-fade-right">
         {{ page.fileSlug | capitalize }}
       </h1>
-      <div class="mt-3 text-xl text-subtext1 sm:mt-4">
+      <div class="mt-0 text-xl text-subtext1">
         {{ description | markdown | safe }}
       </div>
     </div>

_includes/category.njk

@@ -3,7 +3,7 @@
 <main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div>
-      <h1 class="text-5xl tracking-tight fancy-heading">
+      <h1 class="text-5xl tracking-tight fancy-heading inline-block motion-safe:animate-fade-right">
         {{ page.fileSlug | capitalize }}
       </h1>
       <div class="mt-3 text-xl text-subtext1 sm:mt-4">

_includes/content.njk

@@ -3,9 +3,9 @@
 <main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
   <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
     <div class="flex flex-wrap items-baseline">
-      <h1 class="my-2 text-5xl tracking-tight fancy-heading">
+      <h1 class="my-2 text-5xl tracking-tight fancy-heading inline-block motion-safe:animate-fade-right">
         <span class="font-serif">{{ title }}</span>
-        <small class="inline-block h-1 text-xl text-text font-light">
+        <small class="inline-block h-1 mt-0 text-xl text-text font-light">
           in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
         </small>
       </h1>

_includes/pinned.njk

@@ -3,7 +3,7 @@
 <main class="max-w-7xl mx-auto px-2">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div class="p-2 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
-      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading">
+      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading inline-block motion-safe:animate-fade">
         {{ title | markdown | safe }}
       </h1>
       <div class="mt-3 max-w-2xl">

package-lock.json

@@ -15,7 +15,7 @@
         "@catppuccin/tailwindcss": "^0.1.6",
         "@divriots/jampack": "^0.23.3",
         "@toycode/markdown-it-class": "^1.2.4",
-        "autoprefixer": "^10.3.7",
+        "autoprefixer": "^10.4.21",
         "cheerio": "^1.0.0-rc.12",
         "cssnano": "^5.0.8",
         "dayjs": "^1.11.10",
@@ -1962,9 +1962,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "dev": true,
       "funding": [
         {
@@ -1982,11 +1982,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -2306,9 +2306,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001699",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
-      "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==",
+      "version": "1.0.30001720",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001720.tgz",
+      "integrity": "sha512-Ec/2yV2nNPwb4DnTANEV99ZWwm3ZWfdlfkQbWSDDt+PsXEVYwlhPH8tdMaPunYTKKmz7AnHi2oNEi1GcmKCD8g==",
       "dev": true,
       "funding": [
         {

package.json

@@ -35,7 +35,7 @@
     "@catppuccin/tailwindcss": "^0.1.6",
     "@divriots/jampack": "^0.23.3",
     "@toycode/markdown-it-class": "^1.2.4",
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.21",
     "cheerio": "^1.0.0-rc.12",
     "cssnano": "^5.0.8",
     "dayjs": "^1.11.10",

styles.css

@@ -106,6 +106,8 @@ pre {
   );
   background-clip: text;
   color: transparent;
+  padding-bottom: .25rem;
+  margin-bottom: -.25rem;
 
   .text-text {
     color: transparent !important;