Add TOC (#126)

assets/css/main.css

@@ -161,13 +161,29 @@ h6::before { color: var(--maincolor); content: '###### '; }
   letter-spacing: -0.5px;
 }
 
+.post-container {
+  align-items: flex-start;
+  display: flex;
+  gap: 20px;
+}
+
+.post-content {
+  flex: 3;
+  min-width: 0;
+}
+
 .toc {
   background-color: #ececec;
-  color: #232333;
-  padding: 10px;
-  padding-bottom: 0;
   border-radius: 5px;
-  display: inline-block;
+  color: #232333;
+  flex: 0 0 auto;
+  height: auto;
+  margin-left: 20px;
+  max-width: 300px;
+  overflow-y: auto;
+  padding: 10px;
+  position: sticky;
+  top: 20px;
 }
 
 /* Footer */

layouts/_default/single.html

@@ -1,6 +1,9 @@
 {{ define "main" }}
 <main>
   <article>
+    <div class="post-container">
+      <!-- Main Content -->
+      <div class="post-content">
         <div class="title">
           <h1 class="title">{{ .Title }}</h1>
           <div class="meta">Posted on {{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
@@ -10,17 +13,9 @@
           <strong>tl;dr:</strong>
           {{ .Params.tldr }}
         </div>{{ end }}
-
-		{{ if isset .Params "toc" }}
-		<div class="toc">
-		<strong>Table of contents:</strong>
-		{{ .TableOfContents }}
-		</div>{{ end }}
-
         <section class="body">
           {{ .Content }}
         </section>
-
         <div class="post-tags">
           {{ if ne .Type "page" }}
           {{ if gt .Params.tags 0 }}
@@ -34,8 +29,19 @@
           {{ end }}
           {{ end }}
         </div>
+      </div>
+
+      <!-- TOC -->
+      {{ if isset .Params "toc" }}
+      <div class="toc">
+        <strong>Table of contents:</strong>
+        {{ .TableOfContents }}
+      </div>
+      {{ end }}
+    </div>
+
+    <!-- Disqus -->
     {{- $.Scratch.Set "isDisqus" true -}}
-		<!-- Check if disqus short name is given -->
     {{ if not .Site.Config.Services.Disqus.Shortname }}
     {{- $.Scratch.Set "isDisqus" false -}}
     {{ end }}