Add TOC to posts

src/_includes/posts.njk

@@ -10,5 +10,7 @@
 {% endblock %}
 
 {% block sidebar %}
+<h2>Content</h2>
+{{ content | toc | safe }}
 <a href="{{ "/" | url }}">Go Back Home</a>
 {% endblock %}

src/assets/style.scss

@@ -9,6 +9,10 @@ $highlight: #ff005f;
 $highlight-1: #ff005f11;
 $highlight-2: #ff005f22;
 
+$alternative-links: #444;
+$alternative-links-1: #44444411;
+$alternative-links-2: #44444422;
+
 $reduced: #888;
 $reduced-1: #88888811;
 $reduced-2: #88888822;
@@ -65,7 +69,7 @@ a {
 
   // multi-line padded background
   box-decoration-break: clone;
-  border-bottom: 1px dotted $highlight;
+  border-bottom: 1px dotted currentColor;
 
   transition: .2s ease-in background;
 
@@ -244,6 +248,19 @@ footer {
   article { display: none; }
 }
 
+.posts {
+  aside {
+    a {
+      color: $alternative-links;
+      font-size: 14px;
+
+      &:hover {
+        background: $alternative-links-1;
+      }
+    }
+  }
+}
+
 footer {
   a {
     color: inherit;
@@ -260,3 +277,19 @@ footer {
     color: $reduced;
   }
 }
+
+.toc {
+  ol {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 32px;
+
+    li {
+      margin-bottom: 6px;
+
+      @media screen and (max-width: 768px) {
+        margin-bottom: 12px;
+      }
+    }
+  }
+}