add table of contents to post

assets/scss/pages/post.scss

@@ -4,7 +4,7 @@
 
 .post {
   width: 100%;
-  max-width: 34rem;
+  max-width: 50rem;
   margin: 0 auto;
 
   h2, h3 {
@@ -42,18 +42,37 @@
     margin: 0 auto;
     display: block;
   }
+
+  @media screen and (max-width:800px) {
+    font-weight: 400;
+    max-width: 34rem;
+  }
 }
 
-.post__content a {
-  font-weight: 400;
-  color: #0366d6;
-  text-decoration: none;
+.article-w-ToC {
+  display: flex;
+  flex-direction: row;
 
-  &:hover {
-    text-decoration: underline;
+  @media screen and (max-width:800px) {
+    flex-direction: column;
   }
 }
 
+.post__content {
+  max-width: 40rem;
+
+  a {
+    font-weight: 400;
+    color: #0366d6;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+}
+
 .post__title {
   margin-top: 0;
   margin-bottom: 0.5rem;
@@ -103,6 +122,29 @@
   }
 }
 
+#TableOfContents {
+  position: sticky;
+  align-self: start;
+  margin-left: 4rem;
+  white-space: nowrap;
+  top: 4rem;
+
+  ul {
+    list-style: none;
+  }
+
+  a {
+    text-decoration: none;
+    color: #9b9b9b;
+  }
+
+  @media screen and (max-width:800px) {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+  }
+}
+
 .tags__list {
   padding-right: 1.5rem;
   margin: 1.5rem 0 0;

layouts/_default/single.html

@@ -7,17 +7,20 @@
 
     <div class="post">
       <header class="post__header">
-        <h1 class="post__title">{{.Title}}</h1>
+        <h1 id="post__title">{{.Title}}</h1>
         <time datetime="{{ .Date }}" class="post__date"
         >{{ .Date.Format $dateFormat }}</time>
       </header>
-      <article class="post__content">
-          {{ partial "anchored-headings.html" .Content }}
-          {{ if or .Params.math .Site.Params.math }}
-              {{ partial "math.html" . }}
-          {{ end }}
-      </article>
-        {{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
+      <div class="article-w-ToC">
+        <article class="post__content">
+            {{ partial "anchored-headings.html" .Content }}
+            {{ if or .Params.math .Site.Params.math }}
+                {{ partial "math.html" . }}
+            {{ end }}
+        </article>
+          {{ .TableOfContents }}
+      </div>
+      {{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
     </div>
 
     {{ template "_internal/disqus.html" . }}