Make navigation responsive

by wrapping the menu on narrower width and increasing the header height.

Author: afh

source/stylesheets/site.css.scss

@@ -12,14 +12,14 @@ main {
 }
 
 header {
-    height:65px;
+    min-height:65px;
     border-bottom:3px solid gray;
     padding:1em;
 }
 
 header li {
-    display:inline;
-    margin:1em;
+    display:inline-block;
+    margin: 0 2em 0 0;
 }
 
 header a {
@@ -91,3 +91,13 @@ pre code {
 }
 
 .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+
+@media screen and (max-width: 765px) {
+    header li {
+        margin: 1em 2em 0 0;
+    }
+    nav li:has(a[href="/"]) {
+      display: block;
+      margin: 0;
+    }
+}