Switch to media logic for themes and misc fixes

static/css/general.css

@@ -11,29 +11,54 @@ header, footer {
 .globalnav{
     display: flex;
     flex-direction: row;
-    border-collapse: collapse;
+    border: none;
 }
 
 .globalnav-element {
     display: inline-block;
-    border-width: 1px;
-    border-style: solid;
     flex-grow: 1;
+    padding: 0.5em 0;
+    margin: 0 1px;
 }
 
-body.dark-theme a {
-    color: lightskyblue;
+code {
+    display: inline-block;
+    background-color: lightgray;
+    color: green;
+    padding: 0 0.5em;
 }
 
-body.dark-theme .globalnav-element {
-    border-color: black;
-}
+@media (prefers-color-scheme: dark) {
+    html {
+        background-color: black;
+        color: white;
+    }
+
+    .globalnav-element {
+        background-color: #222;
+    }
 
-body.light-theme .globalnav-element {
-    border-color: white;
+    code {
+        background-color: #444;
+        color: lawngreen;
+    }
+
+    a {
+        color: lightskyblue;
+    }
 }
 
-pre, code {
-    background-blend-mode: darken;
-    color: lightgreen;
+@media (prefers-color-scheme: light) {
+    html {
+        background-color: white;
+        color: black;
+    }
+
+    .globalnav-element {
+        background-color: #ddd;
+    }
+
+    code {
+        color: green;
+    }
 }