Dark mode through media query.

Browsers can prefer a certain color scheme. This commit implements a new
dark color scheme for the website which is supposed to be a placeholder,
better colors could be chosen.

public/css/style.css

@@ -1,12 +1,26 @@
-/*$background: #f9f9f9ff;*/
+:root {
+    --color-background: #f9f9f9;
+    --color-text: #000000;
+    --color-text-subdued: #4f4e4e;
+    --color-text-attention: teal;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-background: #111111;
+        --color-text: #f9f9f9;
+        --color-text-subdued: #cccccc;
+        --color-text-attention: teal;
+    }
+}
 
 * {
     box-sizing: border-box;
 }
 
 html, body {
-	/* background-color: rgb(248, 249, 236); */
-	background-color: #f9f9f9ff;
+    color: var(--color-text);
+	background: var(--color-background);
 	font-family: sans-serif;
 	padding: 0;
     min-height: 100%;
@@ -47,7 +61,7 @@ header .logoContainer .siteTag {
             right: 0;
             bottom: 0;
 
-            color: teal;
+            color: var(--color-text-attention);
             font-size: 1.3em;
         }
 
@@ -73,7 +87,10 @@ footer {
     grid-area: footer;
 	border-top: 1px solid black;
 	height: 2em;
-	background-color: #f9f9f9ff;
+}
+
+main a, footer a {
+    color: var(--color-text-attention);
 }
 
 .counter {
@@ -84,8 +101,8 @@ footer {
 }
 
 .staticContent {
-	margin: 0 2em;
-	max-width: 900px;
+    margin: 0 2em;
+    max-width: 900px;
 }
 
 .linkSpacer {

src/css/style.css

@@ -1,14 +1,26 @@
-$pagePadding: 0.5em;
-/*$background: #f9f9f9ff;*/
-$background: #f9f9f9ff;
+:root {
+    --color-background: #f9f9f9;
+    --color-text: #000000;
+    --color-text-subdued: #4f4e4e;
+    --color-text-attention: teal;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-background: #111111;
+        --color-text: #f9f9f9;
+        --color-text-subdued: #cccccc;
+        --color-text-attention: teal;
+    }
+}
 
 * {
     box-sizing: border-box;
 }
 
 html, body {
-	/* background-color: rgb(248, 249, 236); */
-	background-color: $background;
+    color: var(--color-text);
+	background: var(--color-background);
 	font-family: sans-serif;
 	padding: 0;
     min-height: 100%;
@@ -47,7 +59,7 @@ header {
             right: 0;
             bottom: 0;
 
-            color: teal;
+            color: var(--color-text-attention);
             font-size: 1.3em;
         }
 
@@ -68,7 +80,6 @@ main {
     grid-area: content;
 	margin-bottom: 2em;
 
-
     div.search {
         input { width: 100%; }
     }
@@ -78,7 +89,10 @@ footer {
     grid-area: footer;
 	border-top: 1px solid black;
 	height: 2em;
-	background-color: $background;
+}
+
+main a, footer a {
+    color: var(--color-text-attention);
 }
 
 .counter {
@@ -89,8 +103,8 @@ footer {
 }
 
 .staticContent {
-	margin: 0 2em;
-	max-width: 900px;
+    margin: 0 2em;
+    max-width: 900px;
 }
 
 .linkSpacer {