From 16b98dc8f9ca0adfb9a8dbd3062c378ee2f330ae Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Fri, 24 Jul 2020 23:53:25 +0530
Subject: [PATCH] toc: look cool     - improve toc styling     - make
 collapsable

---
 assets/css/main.css          | 10 ++++++++--
 layouts/_default/single.html | 14 ++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index b1874d7c..5afb1a55 100644
--- a/assets/css/main.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a2775fcb..8ba8fc60 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -13,10 +13,16 @@
     </div>
   </header>
   {{ if .Params.ShowToc }}
-  <blockquote>
-    <div class="toc">Table of Contents</div>
-    {{ .TableOfContents }}
-  </blockquote>
+  <div class="toc">
+    <details>
+      <summary>
+        <div class="details">Table of Contents</div>
+      </summary>
+      <blockquote>
+        {{ .TableOfContents }}
+      </blockquote>
+    </details>
+  </div>
   {{ end }}
   <div class="post-content">{{ .Content }}</div>
   {{- if .Params.tags }}