Make design more airy and improve vertical rhythm

src/assets/style.scss

@@ -137,6 +137,22 @@ aside.metadata {
     list-style-type: none;
     transform: translateY(.3em); // align baselines
   }
+
+  li {
+    margin-bottom: 6px;
+
+    @media screen and (max-width: 768px) {
+      margin-bottom: 12px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    font-size: inherit !important
+  }
 }
 
 aside.navigation {
@@ -171,9 +187,13 @@ article {
     padding: 24px 0
   }
 
-  ul {
-    padding: 0 0 0 16px;
-    margin: 0 0 32px;
+  ul, ol {
+    padding: 0 0 0 32px;
+    margin: 0 0 28px;
+
+    li {
+      margin-bottom: 4px;
+    }
   }
 
   .footnote-ref a {
@@ -202,12 +222,12 @@ footer {
 
   h1 {
     font-size: 21px;
-    line-height: 21px;
+    line-height: 32px;
   }
 
   h2 {
     font-size: 18px;
-    line-height: 14px;
+    line-height: 24px;
   }
 
   main {
@@ -295,20 +315,37 @@ footer {
   time {
     color: $reduced;
   }
+
+  li {
+    margin-bottom: 8px;
+  }
 }
 
 .toc {
   ol {
     list-style: none;
     padding: 0;
-    margin: 0 0 32px;
+    margin: 0 0 24px;
 
     li {
-      margin-bottom: 6px;
+      line-height: 16px * 1.5;
+      }
+    }
+  }
+}
 
-      @media screen and (max-width: 768px) {
-        margin-bottom: 12px;
-      }
+.sticky {
+  position: sticky;
+  top: 32px;
 }
+
+// https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/
+sup, sub {
+  vertical-align: baseline;
+  position: relative;
+  top: -0.4em;
 }
+
+sub {
+  top: 0.4em;
 }