Merge pull request #5 from ntk148v/floating-toc

feat(toc): implement toc sidebar
ntk148v · Jul 25, 2023 · 38bebfd · 38bebfd
2 parents 923a174 + 213d2b9
commit 38bebfd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/assets/css/site.css b/assets/css/site.css
@@ -5,14 +5,14 @@
   --page-gutter: 24px;
   --header-height: 48px;
   --footer-height: 48px;
-  --sidebar-top: 70px;
+  --sidebar-top: 72px;
 
   --content-width: 40rem;
   --content-height: calc(100vh - (var(--page-top) * 2) - var(--footer-height));
 
-  @media (min-width: 640px) {
-    --page-top: 192px;
-    --sidebar-top: 300px;
+  @media (min-width: 1080px) {
+    --page-top: 128px;
+    --sidebar-top: 144px;
     --page-gutter: 48px;
   }
 }
@@ -119,6 +119,12 @@ pre > code {
 /* ################################# */
 /* #       Table of contents       # */
 /* ################################# */
+@media screen and (min-width: 1080px) {
+  #toc {
+    @apply fixed top-0 left-0 z-40 w-1/4 px-page-gutter py-sidebar-top;
+  }
+}
+
 #toc-list ol {
   @apply pl-3 m-1 border-l-2 text-sm text-muted;
   counter-reset: tocitem;

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -4,17 +4,7 @@ <h1>{{ .Title | emojify }}</h1>
   {{- partial "date" .Date -}}{{ if ne .Date .Lastmod }}<nobr class="text-sm text-muted">&#8674&nbsp;</nobr>{{- partial "date" .Lastmod -}}{{ end }}
 
   {{- partial "tag" . -}}
-  <!-- Table of contents -->
-  {{ if default true (default .Site.Params.toc .Params.toc) }}
-    {{ if gt (.TableOfContents | countwords)
-      0
-    }}
-      <details>
-        <summary>Table of contents</summary>
-        <div id="toc-list">{{ .TableOfContents }}</div>
-      </details>
-    {{ end }}
-  {{ end }}
+  {{- partial "toc.html" . -}}
   <!-- Content -->
   {{- partial "custom/content-before.html" . -}}
   <div class="content">{{ .Content | emojify }}</div>

diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
@@ -0,0 +1,13 @@
+<!-- Table of contents -->
+<div id="toc">
+  {{ if default true (default .Site.Params.toc .Params.toc) }}
+    {{ if gt (.TableOfContents | countwords)
+      0
+    }}
+      <details>
+        <summary>Table of contents</summary>
+        <div id="toc-list">{{ .TableOfContents }}</div>
+      </details>
+    {{ end }}
+  {{ end }}
+</div>