From c538c151c7462ad0395ff2c15c5e11e89e362aa8 Mon Sep 17 00:00:00 2001
From: Striven <sg.striven@cutecat.club>
Date: Sat, 04 Apr 2026 19:47:16 +0000
Subject: [PATCH] Initial commit

---
 quartz/components/styles/toc.scss |   75 ++++++++++++++++++++++++++++---------
 1 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 33b9cca..6a7723b 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -1,25 +1,64 @@
-details.toc {
-  & summary {
-    cursor: pointer;
+@use "../../styles/variables.scss" as *;
 
-    &::marker {
-      color: var(--dark);
-    }
-
-    & > * {
-      padding-left: 0.25rem;
-      display: inline-block;
-      margin: 0;
-    }
+.toc {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  min-height: 1.4rem;
+  flex: 0 0.5 auto;
+  &:has(button.toc-header.collapsed) {
+    flex: 0 1 1.4rem;
   }
-    
-  & ul {
-    list-style: none;
-    margin: 0.5rem 1.25rem;
-    padding: 0;
+}
+
+button.toc-header {
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  color: var(--dark);
+  display: flex;
+  align-items: center;
+
+  & h3 {
+    font-size: 1rem;
+    display: inline-block;
+    margin: 0;
   }
 
-  @for $i from 1 through 6 {
+  & .fold {
+    margin-left: 0.5rem;
+    transition: transform 0.3s ease;
+    opacity: 0.8;
+  }
+
+  &.collapsed .fold {
+    transform: rotateZ(-90deg);
+  }
+}
+
+ul.toc-content.overflow {
+  list-style: none;
+  position: relative;
+  margin: 0.5rem 0;
+  padding: 0;
+  max-height: calc(100% - 2rem);
+  overscroll-behavior: contain;
+  list-style: none;
+
+  & > li > a {
+    color: var(--dark);
+    opacity: 0.35;
+    transition:
+      0.5s ease opacity,
+      0.3s ease color;
+    &.in-view {
+      opacity: 0.75;
+    }
+  }
+
+  @for $i from 0 through 6 {
     & .depth-#{$i} {
       padding-left: calc(1rem * #{$i});
     }

--
Gitblit v1.10.0