Add animated centerpiece to index

static/assets/css/index.css

@@ -0,0 +1,124 @@
+j-wrap.index {
+
+    display: grid;
+    grid-template-rows: 1fr auto auto;
+    grid-template-columns: 1fr;
+    grid-template-areas: "centerpiece" "title" "navigation";
+
+    max-height: 100cqh;
+    overflow: auto;
+
+    figure.centerpiece {
+        grid-area: centerpiece;
+        padding: 2em 1em;
+    }
+
+    img.centerpiece {
+        height: 100%;
+    }
+
+    h1 {
+        grid-area: title;
+        text-align: center;
+        font-size: calc(1em + 2vw);
+        margin-bottom: 0.125em;
+    }
+
+    nav {
+        grid-area: navigation;
+        padding-bottom: 2em;
+    }
+
+    nav a {
+        text-decoration-style: dotted;
+    }
+
+    nav ul {
+        text-align: center;
+        padding: 0;
+    }
+
+    nav ul li {
+        display: inline;
+        margin: 0 0.25em;
+        font-size: calc(0.65em + 1vw);
+    }
+
+    * { transition: 5s; }
+}
+
+img.centerpiece:hover {
+    cursor: crosshair;
+    border-radius: 180px;
+    backdrop-filter:
+    blur(2px)
+    drop-shadow(4px 4px 10px red)
+    grayscale(70%)
+    ;
+}
+
+img.centerpiece {
+    animation-name: multi;
+    animation-timing-function: linear;
+    animation-duration: 30s;
+    animation-iteration-count: infinite;
+}
+
+img.two { animation-delay: -6s; }
+img.three { animation-delay: -12s; }
+img.four { animation-delay: -18s; }
+img.four { animation-delay: -24s; }
+img.five { animation-delay: -30s; }
+
+@keyframes multi {
+    0% {
+        transform: rotate3d(0, 1, 0, 0deg);
+    }
+
+    10% {
+        filter:
+        hue-rotate(0deg)
+        drop-shadow(0 0 8vw #3B050560)
+        brightness(3)
+        blur(0.2px)
+        saturate(1)
+        contrast(3)
+        ;
+    }
+
+    40% {
+        filter:
+        hue-rotate(0deg)
+        drop-shadow(0 0 0 #00000000)
+        brightness(1)
+        blur(0.2px)
+        saturate(2)
+        contrast(1)
+        ;
+    }
+
+    60% {
+        filter:
+        hue-rotate(0deg)
+        drop-shadow(0 0 8vw #66000060)
+        brightness(1)
+        blur(0.2px)
+        saturate(1)
+        contrast(1)
+        ;
+    }
+
+    90% {
+        filter:
+        hue-rotate(50deg)
+        drop-shadow(0 0 0 #00000000)
+        brightness(3)
+        blur(0)
+        saturate(1.2)
+        contrast(2)
+        ;    }
+
+    100% {
+        transform: rotate3d(0, 1, 0, 360deg);
+    }
+}

static/assets/css/overrides.css

@@ -12,6 +12,7 @@
 @media (prefers-color-scheme: dark) {
     :root {
         color-scheme: dark;
+        --bg: #080606;
         --accent: #FF8A8A;
         --accent-hover: #ffe099;
         --code: #f06292;
@@ -19,15 +20,6 @@
     }
 }
 
-pre,
-code,
-pre span
-{
-    font-family: "Libre Baskerville";
-    background-color: inherit;
-    border: none;
-}
-
 @font-face {
   font-family: 'Kode Mono Variable';
   font-style: normal;
@@ -59,6 +51,15 @@ html {
     font-family: "Libre Baskerville";
 }
 
+pre,
+code,
+pre span
+{
+    font-family: "Libre Baskerville";
+    background-color: inherit;
+    border: none;
+}
+
 .mono pre,
 .mono pre span,
 .mono code,
@@ -68,4 +69,3 @@ html {
 {
     font-family: "Fira Mono";
 }
-