smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 06:24:22 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore(css): style tweaks for overflow
Some checks failed
Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped
Details
Build and Test / publish-tag (push) Has been skipped
Details
Build and Test / build-and-test (macos-latest) (push) Has been cancelled
Details
Build and Test / build-and-test (windows-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Jacky Zhao 2025-04-05 11:38:50 -07:00
parent bb24cd13c7
commit ee8c1dc968
4 changed files with 17 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
quartz/components/scripts/popover.inline.ts
View File

@ -12,7 +12,7 @@ async function mouseEnterHandler(
clearActivePopover()
const link = this
link.id = `backlink-${randomIdNonSecure()}`
const id = randomIdNonSecure()
if (link.dataset.noPopover === "true") {
return
}
@ -27,8 +27,8 @@ async function mouseEnterHandler(
})
}
const prevPopoverElement = document.getElementById(`popover-${link.id.split("-")[1]}`)
const hasAlreadyBeenFetched = () => !!prevPopoverElement
const prevPopoverElement = document.getElementById(`popover-${id}`)
const hasAlreadyBeenFetched = () => !!document.getElementById(`popover-${id}`)
// dont refetch if there's already a popover
if (hasAlreadyBeenFetched()) {
@ -91,7 +91,7 @@ async function mouseEnterHandler(
normalizeRelativeURLs(html, targetUrl)
// prepend all IDs inside popovers to prevent duplicates
html.querySelectorAll("[id]").forEach((el) => {
const targetID = `popover-${el.id}`
const targetID = `popover-internal-${el.id}`
el.id = targetID
})
const elts = [...html.getElementsByClassName("popover-hint")]
@ -101,12 +101,12 @@ async function mouseEnterHandler(
}
setPosition(popoverElement)
popoverElement.id = `popover-${link.id.split("-")[1]}`
popoverElement?.classList.add("active-popover")
popoverElement.id = `popover-${id}`
popoverElement.classList.add("active-popover")
document.body.appendChild(popoverElement)
if (hash !== "") {
const targetAnchor = hash.startsWith("#popover") ? hash : `#popover-${hash.slice(1)}`
const targetAnchor = `#popover-internal-${hash.slice(1)}`
const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
if (heading) {
// leave ~12px of buffer when scrolling to a heading

4
quartz/components/styles/backlinks.scss
View File

@ -8,11 +8,11 @@
margin: 0;
}
& > ul {
& > ul.overflow {
list-style: none;
padding: 0;
margin: 0.5rem 0;
height: 6rem;
max-height: calc(100% - 2rem);
overscroll-behavior: contain;
& > li {

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

@ -3,18 +3,11 @@
.toc {
display: flex;
flex-direction: column;
overflow-y: hidden;
min-height: 1.2rem;
flex: 0 1 auto;
min-height: 1.4rem;
flex: 0 0.5 auto;
&:has(button.toc-header.collapsed) {
flex: 0 1 1.2rem;
}
}
@media all and not ($mobile) {
.toc-header {
display: flex;
flex: 0 1 1.4rem;
}
}
@ -45,15 +38,15 @@ button.toc-header {
}
}
ul.toc-content {
ul.toc-content.overflow {
list-style: none;
position: relative;
margin: 0.5rem 0;
padding: 0;
height: 5rem;
max-height: calc(100% - 2rem);
overscroll-behavior: contain;
list-style: none;
& > li > a {
color: var(--dark);
opacity: 0.35;

3
quartz/styles/base.scss
View File

@ -238,6 +238,7 @@ a {
padding: 0;
& > * {
flex: 1;
max-height: 24rem;
}
& > .toc {
display: none;
@ -577,7 +578,7 @@ ol.overflow {
clear: both;
& > li.overflow-end {
height: 1rem;
height: 0.5rem;
margin: 0;
}