Enable small device menu.

Author: dennisguse

_includes/header.html

@@ -10,9 +10,9 @@
               </svg>
             </a>
             <div class="trigger">
-                <a class="page-link" href="/">/home</a>
+                <a class="page-link" href="/#">top</a>
                 <a class="page-link" href="/#features">/features</a>
-                <a class="page-link" href="/#features">/privacy</a>
+                <a class="page-link" href="/#privacy">/privacy</a>
 
                 <a class="page-link" href="https://www.android.com/"><img class="on-line-logo" src="/static/img/android-logo.svg"></a>
             </div>

static/img/android-logo.svg

@@ -89,3 +89,53 @@ header {
   height: 2rem;
   vertical-align: middle;
 }
+
+@media screen and (max-width: 750px) {
+  .wrap {
+      padding: 0 1em;
+  }
+
+  .site-nav {
+    position: fixed;
+    z-index: 10;
+    top: 1.5em;
+    right: 1em;
+  }
+
+  .site-nav .menu-icon {
+    display: block;
+    font-size: 1.5em;
+    color: #505050;
+    float: right;
+    width: 2em;
+    text-align: center;
+    line-height: 1em;
+  }
+
+  .site-nav .menu-icon svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .site-nav .trigger {
+    clear: both;
+    margin-bottom: 5px;
+    display: none;
+
+    background-color: darkgray;
+    border-radius: 5px;
+    box-shadow: 0.1em 0.1em #0E0E0E;
+  }
+
+  .site-nav:hover .trigger {
+    display: block;
+  }
+
+  .site-nav .page-link {
+    display: block;
+    text-align: right;
+    line-height: 1.25;
+    padding: 5px 10px;
+    margin: 0;
+  }
+}