yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: overflow list bottom gradient on toc (closes #1888)

Browse Source
This commit is contained in:
Jacky Zhao
2025-03-30 17:30:01 -07:00
parent 9ff6c7a3f5
commit f70e562432
3 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
quartz/components/TableOfContents.tsx
View File

@@ -53,17 +53,15 @@ export default ((opts?: Partial<Options>) => {
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </button>
<div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}> <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
<OverflowList> {fileData.toc.map((tocEntry) => (
{fileData.toc.map((tocEntry) => ( <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}> <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}> {tocEntry.text}
{tocEntry.text} </a>
</a> </li>
</li> ))}
))} </OverflowList>
</OverflowList>
</div>
</div> </div>
) )
} }

26
quartz/components/styles/toc.scss
View File

@@ -45,23 +45,21 @@ button.toc-header {
} }
} }
.toc-content { ul.toc-content {
list-style: none; list-style: none;
position: relative; position: relative;
margin: 0.5rem 0;
padding: 0;
& ul { list-style: none;
list-style: none; & > li > a {
margin: 0.5rem 0; color: var(--dark);
padding: 0; opacity: 0.35;
& > li > a { transition:
color: var(--dark); 0.5s ease opacity,
opacity: 0.35; 0.3s ease color;
transition: &.in-view {
0.5s ease opacity, opacity: 0.75;
0.3s ease color;
&.in-view {
opacity: 0.75;
}
} }
} }

1
quartz/styles/base.scss
View File

@@ -556,6 +556,7 @@ video {
div:has(> .overflow) { div:has(> .overflow) {
display: flex; display: flex;
max-height: 100%; max-height: 100%;
overflow-y: hidden;
} }
ul.overflow, ul.overflow,