From f70e562432ca251d4c4373dfa0b02dcde11297bc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 31 Mar 2025 00:30:01 +0000
Subject: [PATCH] fix: overflow list bottom gradient on toc (closes #1888)
---
quartz/styles/base.scss | 1 +
quartz/components/TableOfContents.tsx | 20 +++++++++-----------
quartz/components/styles/toc.scss | 26 ++++++++++++--------------
3 files changed, 22 insertions(+), 25 deletions(-)
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index d376200..f3dc905 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -53,17 +53,15 @@
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
- <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
- <OverflowList>
- {fileData.toc.map((tocEntry) => (
- <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
- <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
- {tocEntry.text}
- </a>
- </li>
- ))}
- </OverflowList>
- </div>
+ <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
+ {fileData.toc.map((tocEntry) => (
+ <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+ <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+ {tocEntry.text}
+ </a>
+ </li>
+ ))}
+ </OverflowList>
</div>
)
}
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index bc0c749..efa0aa7 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -45,23 +45,21 @@
}
}
-.toc-content {
+ul.toc-content {
list-style: none;
position: relative;
+ margin: 0.5rem 0;
+ padding: 0;
- & ul {
- list-style: none;
- margin: 0.5rem 0;
- padding: 0;
- & > li > a {
- color: var(--dark);
- opacity: 0.35;
- transition:
- 0.5s ease opacity,
- 0.3s ease color;
- &.in-view {
- opacity: 0.75;
- }
+ 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;
}
}
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 5243a4a..022e9b5 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -556,6 +556,7 @@
div:has(> .overflow) {
display: flex;
max-height: 100%;
+ overflow-y: hidden;
}
ul.overflow,
--
Gitblit v1.10.0