add sticky header, show nav like sidenotes

static/css/undef.css

@@ -68,6 +68,8 @@ body > header {
   border-right-style: solid;
   border-right-width: 5px;
   padding-bottom:     1rem;
+  position:           sticky;
+  top:                2ch;
 }
 
 body > header > a > h1 {  
@@ -107,14 +109,19 @@ input[type="checkbox"] {
 }
 
 #shownav + label {
-  display:    block;
+  display:    none;
   width:      100%;
   text-align: right;
 }
 
 #shownav + label + nav {
-  display:    none;
-  text-align: center;
+  display:       block;
+  text-align:    left;
+  float:         right;
+  clear:         right;
+  width:         15rem;
+  margin-right:  -16rem;
+  margin-bottom: 1em;
 }
 
 #shownav:checked + label + nav {
@@ -126,6 +133,10 @@ nav > ul {
   color:     var(--accent-a);
 }
 
+#shownav + label + nav > ul {
+  font-size: 2rem;
+}
+
 label[for="shownav"]::before {
   content: "∨"
 }
@@ -311,4 +322,17 @@ label.sidenote-toggle {
   body > header > a > h1 {
     font-size: 3rem;
   }
+
+  #shownav + label {
+    display: block;
+  }
+
+  #shownav + label + nav {
+    display:      none;
+    text-align:   center;
+    float:        none;
+    clear:        none;
+    width:        auto;
+    margin-right: 0rem;
+  }
 }