refactor: add post-title to ToC

jakewies · Jun 25, 2020 · 95c820e · 95c820e
1 parent 9a4b63d
commit 95c820e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/assets/scss/pages/post.scss b/assets/scss/pages/post.scss
@@ -70,12 +70,24 @@ $tocBreakpoint: 1024px;
   padding-top: 3rem;
 }
 
-#TableOfContents {
+.toc-container {
   position: sticky;
   align-self: start;
   top: 3rem;
   max-width: 350px;
 
+  @media screen and (max-width: $tocBreakpoint) {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+  }
+}
+
+.toc-post-title {
+  font-size: 0.9rem;
+}
+
+#TableOfContents {
   ul {
     list-style: none;
     margin: 0;
@@ -90,12 +102,6 @@ $tocBreakpoint: 1024px;
   a.active {
     color: rgb(51, 51, 51);
   }
-
-  @media screen and (max-width: $tocBreakpoint) {
-    visibility: hidden;
-    width: 0;
-    margin: 0;
-  }
 }
 
 .tags__list {

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -28,7 +28,10 @@ <h1 id="post__title">{{.Title}}</h1>
           </div>
       </div>
       {{ if or .Params.toc .Site.Params.toc }}
+      <div class="toc-container">
+        <div class="toc-post-title">{{.Title}}</div>
         {{ .TableOfContents }}
+      </div>
       {{ end }}
     </div>