Add loading skeleton

src/main/resources/static/details.css

@@ -1,7 +1,9 @@
 @import url("./main.css");
+@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
 
 :root {
     --min-card-size: min(60ch, calc(100vw - var(--pad-main)));
+    --rating-color: gold;
 }
 
 main {
@@ -80,19 +82,25 @@ header {
     content: "";
     display: inline-block;
     width: 5em;
-    height: 1em;
-    margin-block: calc(-1 * (1lh - 1.25em));
+    height: 1lh;
+    vertical-align: bottom;
     margin-inline: .5ch;
     mask-image: url("stars.svg");
     -webkit-mask-image: url("stars.svg");
     mask-size: 100% 100%;
     mask-mode: alpha;
     --rating-percent: calc((var(--rating, 0) / 5) * 100%);
-    background: linear-gradient(to right, gold var(--rating-percent), var(--bg-color) var(--rating-percent));
+    background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
 }
 
 a {
-    color: var(--accent-color);
+    --text-color: var(--accent-color);
+
+    /*
+        Why doesn't it do this automatically? It is inherited from body,
+        so I should be able to just change --text-color, right?
+    */
+    color: var(--text-color); 
 }
 
 #terms-of-use {
@@ -121,4 +129,52 @@ a {
     br {
         margin-bottom: .5lh;
     }
-}
+}
+
+.skeleton {
+    font-family: "Flow Circular";
+    font-weight: 400;
+    font-style: normal;
+    user-select: none;
+    --rating-color: var(--text-color);
+    
+    a, .btn {
+        pointer-events: none;
+    }
+    
+    & > * {
+        cursor: progress;
+    }
+    
+    @media screen and not (prefers-reduced-motion) {
+        :is(header, section) > :is(p, span, h1, a) {
+            animation: infinite 2s linear skeleton-loading;
+            background: radial-gradient(
+                circle farthest-side,
+                var(--highlight-color, white) 20%,
+                var(--text-color) 40%
+                ) no-repeat, var(--text-color);
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+                
+            &:is(a) {
+                --highlight-color: color-mix(in oklab, white, var(--text-color));
+            }
+        }
+    }
+
+    #title::after {
+        color: color-mix(in oklab, var(--accent-color) 50%, currentcolor);
+    }
+}
+
+@keyframes skeleton-loading {
+    from {
+        background-position-x: calc(-1.4 * var(--min-card-size)), 0;
+    }
+
+    to {
+        background-position-x: calc(1.4 * var(--min-card-size)), 0;
+    }
+}