add: expandable ToC

assets/css/dark.css

@@ -4,6 +4,7 @@
   
 --card-color: #2e2e33;
 --card-border-color: #333333;
+--card-border-radius: 0.5em;
 
 --link-color:#599ada;
 --link-state-color:#ff5858;

assets/css/light.css

@@ -5,6 +5,7 @@
     
     --card-color: #fafafa;
     --card-border-color: #eeeeee;
+    --card-border-radius: 0.5em;
 
     --link-color:#1d60a3;
     --link-state-color:rgb(163, 29, 29);
@@ -15,7 +16,6 @@
 
     --nav-bg-color: #fafafa;
     --nav-link-color: #696969;
-    --nav-border-radius: 10px;
 
     --pre-color: rgb(31, 35, 40);
     --pre-bg-color: rgba(175, 184, 193, 0.2);

assets/css/main.css

@@ -72,6 +72,33 @@ main {
     outline:none;
 }
 
+/* Table of Contents */
+
+.toc {
+    cursor: zoom-in;
+    display: block;
+    
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding: 0.5em 1em; /* top & bottom, left & right */
+    
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-border-radius);
+    background: var(--card-color);
+
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.toc.expanded {
+    cursor: zoom-out;
+}
+
+.toc .inner {
+    margin: 0px;
+    padding: 0px;
+}
+
 /* Headers */
 h1 {
     font-size: 1.35em;
@@ -257,7 +284,7 @@ header nav:not(:empty){
     text-align: center;
     padding: 0.5em 0;
     border: 1px solid var(--card-border-color);
-    border-radius: var(--nav-border-radius);
+    border-radius: var(--card-border-radius);
 }
 
 header nav a {

layouts/partials/toc.html

@@ -1,9 +1,19 @@
-{{ $toc := and ($.Site.Params.toc) (ge .WordCount $.Site.Params.tocWordCount) }}
+{{ $toc := and ($.Site.Params.toc) (ge .WordCount $.Site.Params.tocWordCount) }} {{ if isset .Params "toc" }} {{ $toc = .Params.toc }} {{ end }} {{ if $toc }}
-
+<details class="toc">
-{{ if isset .Params "toc" }}
+  <summary>Table of Contents</summary>
-{{ $toc = .Params.toc }}
+  <div class="inner">{{ .TableOfContents }}</div>
+</details>
 {{ end }}
 
-{{ if $toc }}
+<script>
-{{ .TableOfContents }}
+  document.querySelector(".toc").addEventListener("click", function () {
-{{ end }}
+    event.preventDefault();
+    if (this.open) {
+      this.open = false;
+      this.classList.remove("expanded");
+    } else {
+      this.open = true;
+      this.classList.add("expanded");
+    }
+  });
+</script>