1 files changed, 72 insertions, 11 deletions

diff --git a/www/index.css b/www/index.css
index 73a4ae4..21baa50 100644
--- a/www/index.css
+++ b/www/index.css
@@ -1,14 +1,69 @@
-html,body { margin: 0; font-family: sans-serif; }
-#body { margin: 16px 10%; }
-#body article { border-bottom: 1px solid #060606; }
+/* default / light */
+:root {
+  --background: white;
+  --font: black;
+  --quote: #eee;
+  --link: #0303ee;
+  --linkv: #551a8b;
+  --linkf: #f02727;
+  --articleborder: #060606;
+  --tableborder: #aaa;
+  --tablehead: #ebcfff;
+  --tablez: #eee;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #1e1e1e;
+    --font: #eee;
+    --quote: #444;
+    --link: #00d3d3;
+    --linkv: #cd78f4;
+    --linkf: #f02727;
+    --articleborder: #23ed9b;
+    --tableborder: #aaa;
+    --tablehead: #6f5a7e;
+    --tablez: #313131;
+  }
+}
+
+html,body { 
+  margin: 0; 
+  font-family: sans-serif;
+  background-color: var(--background);
+  color: var(--font);
+}
+a {
+  color: var(--link);
+}
+a:visited {
+  color: var(--linkv);
+}
+a:focus {
+  color: var(--linkf);
+}
+#body { 
+  margin: 16px auto; 
+  max-width: 700px;
+}
+@media only screen and (max-width: 800px) {
+  #body {
+    margin: 16px 10%;
+    max-width: 700px;
+  }
+}
+
+#body article { 
+  border-bottom: 1px solid var(--articleborder); 
+}
 #body article:last { border-bottom: none; }
-#body table { border-collapse: collapse; border: 1px solid #aaa; }
-#body table td, #body table th { border: 1px solid #aaa; padding: 2px 8px; } 
-#body table tr:nth-child(even) { background-color: #eee; }
+#body table { border-collapse: collapse; border: 1px solid var(--tableborder); }
+#body table thead tr { background-color: var(--tablehead); }
+#body table td, #body table th { border: 1px solid var(--tableborder); padding: 2px 8px; } 
+#body table tr:nth-child(even) { background-color: var(--tablez); }
 #body ul.compact { columns: 2; }
 
 #body blockquote {
-  background-color: #eee;
+  background-color: var(--quote);
   border-radius: 2px;
   padding: 4px;
 }
@@ -51,22 +106,29 @@ html,body { margin: 0; font-family: sans-serif; }
   color:inherit; text-decoration: none; 
 }
 #footer {
-  font-size: 0.75em;
+  font-size: 0.90em;
   float:right;
 }
 
+#copyright {
+  font-size: 0.80em;
+  float:left;
+}
+
 article .footer {
-  font-size: 0.75em;
+  font-size: 0.90em;
   float:right;
 }
 
 .footnote {
+  /* always shift the footnotes a bit below whats above */
+  margin: 24px 0 0 0;
   font-size: 0.75em;
 }
 
 code {
   font-family: monospace;
-  background-color: #eee;
+  background-color: var(--quote);
   padding: 4px 4px;
   border-radius: 5px 5px;
   display: inline-block;
@@ -88,5 +150,4 @@ code.inline {
   height: auto;
 }
 
-
 #tutorial { margin: 2% }