Cleanup of CSS.

All units expressed in `rem`, invert logo in prefers-dark, padding
around the footer.

public/css/style.css

@@ -3,6 +3,8 @@
     --color-text: #000000;
     --color-text-subdued: #4f4e4e;
     --color-text-attention: teal;
+    --color-text-warning: rgb(218, 13, 13);
+    --invert: 0;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -10,7 +12,8 @@
         --color-background: #111111;
         --color-text: #f9f9f9;
         --color-text-subdued: #cccccc;
-        --color-text-attention: teal;
+        --color-text-warning: rgb(218, 13, 13);
+        --invert: 1;
     }
 }
 
@@ -38,22 +41,23 @@ body {
     grid-template:
         "header" 7rem 
         "content" 1fr
-        "footer" 50px;
+        "footer" 2rem;
 }
 
 header {
     grid-area: header;
-	border-bottom: 2px solid black;
+	border-bottom: 1px solid var(--color-text-subdued);
-    align-self: center;
 }
 
 header .logoContainer {
         display: inline-block;
         position: relative;
+        margin: 1rem 0;
     }
 
 header .logoContainer .logo {
             height: 5rem;
+            filter: invert(var(--invert));
         }
 
 header .logoContainer .siteTag {
@@ -68,12 +72,12 @@ header .logoContainer .siteTag {
 header .logoContainer .betaTag {
             width: 1px; /* Out-of-box alignment hack */
             position: absolute;
-            right: -.3em;
+            right: -.3rem;
             bottom: 0;
             font-style: italic;
 
-            color: rgb(218, 13, 13);
+            color: var(--color-text-warning);
-            font-size: 1.3em;
+            font-size: 1.3rem;
         }
 
 main {
@@ -85,8 +89,8 @@ main div.search input { width: 100%; }
 
 footer {
     grid-area: footer;
-	border-top: 1px solid black;
+    line-height: 2rem;
-	height: 2em;
+	border-top: 1px solid var(--color-text-subdued);
 }
 
 main a, footer a {

src/css/style.css

@@ -3,6 +3,8 @@
     --color-text: #000000;
     --color-text-subdued: #4f4e4e;
     --color-text-attention: teal;
+    --color-text-warning: rgb(218, 13, 13);
+    --invert: 0;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -10,7 +12,8 @@
         --color-background: #111111;
         --color-text: #f9f9f9;
         --color-text-subdued: #cccccc;
-        --color-text-attention: teal;
+        --color-text-warning: rgb(218, 13, 13);
+        --invert: 1;
     }
 }
 
@@ -38,20 +41,21 @@ body {
     grid-template:
         "header" 7rem 
         "content" 1fr
-        "footer" 50px;
+        "footer" 2rem;
 }
 
 header {
     grid-area: header;
-	border-bottom: 2px solid black;
+	border-bottom: 1px solid var(--color-text-subdued);
-    align-self: center;
 
     .logoContainer {
         display: inline-block;
         position: relative;
+        margin: 1rem 0;
 
         .logo {
             height: 5rem;
+            filter: invert(var(--invert));
         }
 
         .siteTag {
@@ -66,12 +70,12 @@ header {
         .betaTag {
             width: 1px; /* Out-of-box alignment hack */
             position: absolute;
-            right: -.3em;
+            right: -.3rem;
             bottom: 0;
             font-style: italic;
 
-            color: rgb(218, 13, 13);
+            color: var(--color-text-warning);
-            font-size: 1.3em;
+            font-size: 1.3rem;
         }
     }
 }
@@ -87,8 +91,8 @@ main {
 
 footer {
     grid-area: footer;
-	border-top: 1px solid black;
+    line-height: 2rem;
-	height: 2em;
+	border-top: 1px solid var(--color-text-subdued);
 }
 
 main, footer {