Style: implement light/dark aka day/night mode. Fixes #3.

Author: dennisguse

_includes/header.html

@@ -4,9 +4,9 @@
          <nav class="site-nav">
             <a href="#" class="menu-icon">
               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 15" enable-background="new 0 0 18 15" xml:space="preserve">
-                <path fill="white" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
-                <path fill="white" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
-                <path fill="white" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+                <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+                <path d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+                <path d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
               </svg>
             </a>
             <div class="trigger">

_includes/privacy.md

@@ -1,4 +1,4 @@
-# [Privacy first, features second.](Privacy)
+# [Privacy](#Privacy)
 
 OpenTracks and OSM Dashboard:
 * _do not contain any in-app analytics_

static/main.css

@@ -6,15 +6,12 @@ html, body {
   font-size: 1em;
   line-height: 1.5;
 
-  color: white;
-  background-color: #0E0E0E;
-
   scroll-behavior: smooth;
 }
 
 a {
   text-decoration: none;
-  color: white;
+  color: black;
 }
 
 a:hover
@@ -30,10 +27,8 @@ h3 {
   margin-top: 3rem;
 }
 
-
 /* Site header */
 header {
-  border-top: 0.2em solid #333;
   border-bottom: 0.1em solid #e8e8e8;
   min-height: 3em;
 
@@ -58,6 +53,7 @@ header {
 
 .site-nav .menu-icon {
   display: none;
+  color: #505050;
 }
 
 .site-nav .page-link {
@@ -105,7 +101,6 @@ header {
   .site-nav .menu-icon {
     display: block;
     font-size: 1.5em;
-    color: #505050;
     float: right;
     width: 2em;
     text-align: center;
@@ -122,13 +117,20 @@ header {
     margin-bottom: 5px;
     display: none;
 
-    background-color: darkgray;
     border-radius: 5px;
-    box-shadow: 0.1em 0.1em #0E0E0E;
   }
 
   .site-nav:hover .trigger {
     display: block;
+    background-color: #FFCF99; /* Slightly ligher than holo accent color FF8800 */
+
+    border-radius: 5px;
+    box-shadow: 0.1em 0.1em #0E0E0E;
+  }
+  @media (prefers-color-scheme: dark) {
+    .site-nav:hover .trigger {
+      background-color: #FF8800 !important;
+    }
   }
 
   .site-nav .page-link {
@@ -139,3 +141,18 @@ header {
     margin: 0;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+    html, body {
+      color: white;
+      background-color: #0E0E0E;
+    }
+
+    a {
+      color: white;
+    }
+
+    .site-nav .menu-icon svg path {
+      fill: white;
+    }
+}