more sidenote/reference features

4 files changed, 47 insertions, 3 deletions

diff --git a/scss/_browser.scss b/scss/_browser.scss
index adf9dd1..118842f 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -26,6 +26,14 @@
       background: inherit;
     }
 
+    .subnav {
+      display: flex;
+      flex: 0;
+      background: $gray-darker;
+      border-bottom: 2px solid $gray-dark;
+      padding: 0.5em;
+    }
+
     .content {
       margin: 0;
       padding: 0;
diff --git a/scss/_content.scss b/scss/_content.scss
index ad854de..a5b626a 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -5,8 +5,8 @@
   }
 
   .markdown {
-    max-width: 640px;
     position: relative;
+    max-width: 640px;
 
     &.wide {
       max-width: max-content;
diff --git a/scss/_reset.scss b/scss/_reset.scss
index 396c3e7..724624d 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -13,6 +13,11 @@ body, html, h1, h2, h3, h4, h5, h6 {
 }
 
 h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+h1 { font-size: 1.6em; }
+h2 { font-size: 1.4em; }
+h3 { font-size: 1.17em; }
+h4, h5, h6 { font-size: 1em; }
+
 input, select, button {
   color: initial;
   &:disabled {
@@ -23,10 +28,16 @@ tt, code, kbd, samp { font-family: monospace; }
 code { font-size: 0.8em; }
 b, strong { font-weight: bold; }
 em, i { font-style: italic; }
-a { font-size: 1em; cursor: pointer; }
 hr { clear: both; }
 ul { margin: 0; }
 
+sup, sub {
+  vertical-align: baseline;
+  position: relative;
+  top: -0.4em;
+}
+sub { top: 0.4em; }
+
 body {
   display: flex;
   flex-direction: column;
@@ -40,11 +51,12 @@ body {
 
 a {
   display: inline-block;
-
+  font-size: 1em;
   font-weight: bold;
   text-decoration: underline;
   text-decoration-color: transparent;
 
+  cursor: pointer;
   &:hover {
     filter: invert(40%);
     text-decoration-color: currentColor;
diff --git a/scss/_sidenotes.scss b/scss/_sidenotes.scss
index eddebc1..28b1494 100644
--- a/scss/_sidenotes.scss
+++ b/scss/_sidenotes.scss
@@ -20,6 +20,30 @@ $sidenote-width: 14rem;
     font-size: 0.8em;
     word-break: break-word;
 
+    .hook {
+      position: absolute;
+      top: -4rem;
+      width: 0;
+      height: 0;
+
+      @media print {
+        top: 0;
+      }
+    }
+
+    .ref {
+      display: block;
+      position: absolute;
+
+      width: 1rem;
+      margin-left: -1.2rem;
+      text-align: right;
+    }
+
+    a {
+      display: inline;
+    }
+
     @include media-medium {
       width: initial;
       position: initial;