From 3cf08376fbb0f8594d4aef3fef83406f0745b3e6 Mon Sep 17 00:00:00 2001
From: arne <hi@arnes.space>
Date: Tue, 4 Oct 2022 12:21:00 +0200
Subject: [PATCH] Make design more airy and improve vertical rhythm

---
 src/assets/style.scss | 57 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/assets/style.scss b/src/assets/style.scss
index 27dde00..a798c10 100644
--- a/src/assets/style.scss
+++ b/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;
-
-      @media screen and (max-width: 768px) {
-        margin-bottom: 12px;
+      line-height: 16px * 1.5;
       }
     }
   }
 }
+
+.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;
+}