feat: style for toc list

3 files changed, 54 insertions, 4 deletions

diff --git a/assets/css/index.css b/assets/css/index.css
index 6978833d..0be9775a 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -629,12 +629,63 @@ a.blog-link img {
     right: calc(50% + var(--page-width) / 2);
     left: auto;
     height: 100%;
-    top: 10rem;
+    top: 12rem;
 }
 
 #toc {
+    /* position */
     position: sticky;
-    top: 3rem
+    top: 3rem;
+    /* styling */
+    font-size: 1rem;
+    padding: 0 2rem;
+}
+
+#toc ul, #toc ol {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 1rem;
+}
+
+#toc li {
+    list-style: none;
+}
+
+#toc li > a {
+    color: var(--secondary-text-color);
+    text-decoration: none;
+    transition: .3s;
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+#toc li > a::before {
+    content: '';
+    display: inline-block;
+    width: 1rem;
+    height: .3rem;
+    background-color: var(--block-background-color);
+    border-radius: .2rem;
+}
+
+#toc li a:hover,
+#toc li.is-active-li > a {
+    color: var(--text-color);
+}
+
+#toc li.is-active-li > a::before {
+    background-color: var(--secondary-text-color);
+}
+
+#toc .toc-list {
+	overflow: hidden;
+	position: relative;
+	transition: .3s;
+}
+
+#toc .toc-list.is-collapsed {
+	max-height: 0
 }
 
 /* transition swup */
diff --git a/hugo.toml b/hugo.toml
index bcde2d79..efacda3a 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -21,7 +21,6 @@ favicon = "/favicon.png"
 
 extraCSSFiles = [
     'https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.css',
-    'https://unpkg.com/tocbot@4.32.2/dist/tocbot.css',
     'https://unpkg.com/@waline/client@v3/dist/waline.css'
 ]
 externalJSFIles = [
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 89be5e8d..ed791d4c 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -40,7 +40,7 @@ function loadToc() {
     // Where to grab the headings to build the table of contents.
     contentSelector: '#post-content',
     // Which headings to grab inside of the contentSelector element.
-    headingSelector: 'h2, h3',
+    headingSelector: 'h2, h3:not(blockquote > h3)',
     // For headings inside relative or absolute positioned containers within content.
     hasInnerContainers: true,
   });