toc: look cool

- improve toc styling
    - make collapsable

assets/css/main.css

@@ -47,7 +47,13 @@
 }
 
 .toc {
-    border-bottom: 1px solid var(--border);
-    font-size: 20px;
+    margin-bottom: 40px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: .5em;
+}
+
+.toc .details {
+    display: inline;
     font-weight: 500;
 }

layouts/_default/single.html

@@ -13,10 +13,16 @@
     </div>
   </header>
   {{ if .Params.ShowToc }}
+  <div class="toc">
+    <details>
+      <summary>
+        <div class="details">Table of Contents</div>
+      </summary>
       <blockquote>
-    <div class="toc">Table of Contents</div>
         {{ .TableOfContents }}
       </blockquote>
+    </details>
+  </div>
   {{ end }}
   <div class="post-content">{{ .Content }}</div>
   {{- if .Params.tags }}