fix: Only render scrolling header space on pages that have scrolling header

assets/styles/millironx.css

@@ -562,79 +562,3 @@ textarea:invalid {
     clear: both;
   }
 } /* end @media */
-
-@media (prefers-reduced-motion: no-preference) {
-  @supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
-    @keyframes sticky-header {
-      from {
-        height: 50vh;
-        top: 6rem;
-      }
-
-      to {
-        height: 10vh;
-        top: -1rem;
-      }
-    }
-
-    @keyframes blurry-header {
-      from {
-        filter: blur(0);
-      }
-
-      to {
-        filter: blur(2px);
-      }
-    }
-
-    @keyframes transparent-text-bg {
-      from {
-        background-color: var(--motto-background);
-      }
-      to {
-        background-color: rgba(0, 0, 0, 0);
-      }
-    }
-
-    main,
-    footer {
-      position: relative;
-      top: 55vh;
-    }
-
-    .motto {
-      position: fixed;
-      top: 12rem;
-
-      animation: sticky-header linear forwards;
-      animation-timeline: scroll();
-      animation-range: 0 50vh;
-    }
-
-    .motto::before {
-      filter: blur(12px);
-
-      top: 2rem;
-
-      animation: blurry-header linear forwards;
-      animation-timeline: scroll();
-      animation-range: 0 50vh;
-    }
-
-    .motto-inside h1 {
-      animation: transparent-text-bg linear forwards;
-      animation-timeline: scroll();
-      animation-range: 0 40vh;
-    }
-
-    @media (min-width: 768px) {
-      .motto {
-        width: calc(100% - 8rem);
-      }
-
-      .motto::before {
-        top: 0;
-      }
-    }
-  } /* end @supports */
-} /* end @media */

assets/styles/scrolling-header.css

@@ -0,0 +1,75 @@
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
+    @keyframes sticky-header {
+      from {
+        height: 50vh;
+        top: 6rem;
+      }
+
+      to {
+        height: 10vh;
+        top: -1rem;
+      }
+    }
+
+    @keyframes blurry-header {
+      from {
+        filter: blur(0);
+      }
+
+      to {
+        filter: blur(2px);
+      }
+    }
+
+    @keyframes transparent-text-bg {
+      from {
+        background-color: var(--motto-background);
+      }
+      to {
+        background-color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    main,
+    footer {
+      position: relative;
+      top: 55vh;
+    }
+
+    .motto {
+      position: fixed;
+      top: 12rem;
+
+      animation: sticky-header linear forwards;
+      animation-timeline: scroll();
+      animation-range: 0 50vh;
+    }
+
+    .motto::before {
+      filter: blur(12px);
+
+      top: 2rem;
+
+      animation: blurry-header linear forwards;
+      animation-timeline: scroll();
+      animation-range: 0 50vh;
+    }
+
+    .motto-inside h1 {
+      animation: transparent-text-bg linear forwards;
+      animation-timeline: scroll();
+      animation-range: 0 40vh;
+    }
+
+    @media (min-width: 768px) {
+      .motto {
+        width: calc(100% - 8rem);
+      }
+
+      .motto::before {
+        top: 0;
+      }
+    }
+  } /* end @supports */
+} /* end @media */

layouts/_default/baseof.html

@@ -13,6 +13,7 @@
       $twbssass | minify
     }}
     <link href="{{ $twbssass.RelPermalink }}" rel="stylesheet" />
+    {{ block "extraCss" . }}{{ end }}
   </head>
 
   {{ $millironx := resources.Get "graphics/millironx.svg" }}

layouts/_default/list.html

@@ -1,3 +1,8 @@
+{{ define "extraCss" }}
+  {{ $scrollCss := resources.Get "styles/scrolling-header.css" | minify }}
+  <link href="{{ $scrollCss.RelPermalink }}" rel="stylesheet" />
+{{ end }}
+
 {{ define "main" }}
   {{ partial "scrolling-image-header" . }}
   <section>