Use color variables in CSS

src/templates/directory.rs

@@ -59,7 +59,7 @@ mod tests {
             </thead>
             <tbody>
               <tr>
-                <td>bar</td>
+                <td><a>bar</a></td>
                 <td class=size><a href=/file/[[:xdigit:]]{64} download="bar">1\.5 KiB</a></td>
               </tr>
               <tr>

static/404.css

@@ -9,7 +9,7 @@ a {
 }
 
 a:hover {
- text-shadow: 0 0 100px #fff;
+ text-shadow: 0 0 100px;
 }
 
 body {

static/home.css

@@ -39,12 +39,12 @@ a {
 }
 
 a:hover {
-  text-shadow: 0 0 5px #fff;
+  text-shadow: 0 0 5px;
   text-decoration: none;
 }
 
 div {
-  text-shadow: 0 0 5px #fff;
+  text-shadow: 0 0 5px;
 }
 
 /* filepack is an isogram */

static/index.css

@@ -1,3 +1,8 @@
+:root {
+  --primary: rgb(255 255 255 / 87%);
+  --secondary: rgb(255 255 255 / 60%);
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -6,13 +11,17 @@ a {
   color: #4169e1;
 }
 
+a:not([href]) {
+  color: var(--primary);
+}
+
 a:not(:hover) {
   text-decoration: none;
 }
 
 html {
   background-color: #121212;
   color-scheme: dark;
-  color: rgb(255 255 255 / 87%);
+  color: var(--primary);
   font-family: sans-serif;
 }

static/track.css

@@ -16,7 +16,7 @@ img {
   padding: 0.75em 1em;
 
   .album, .artist {
-    color: #aaa;
+    color: var(--secondary);
     font-size: 0.875em;
   }
 

templates/directory.html

@@ -17,7 +17,7 @@ <h1>Directory {{ self.hash }}</h1>
 %%       if ResourceType::from_filename(name).is_some() {
       <td><a href=/file/{{ hash }}/{{ name.percent_encode_segment() }}>{{ name }}</a></td>
 %%       } else {
-      <td>{{ name }}</td>
+      <td><a>{{ name }}</a></td>
 %%       }
 %%     }
 %%   }