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

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

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

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

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

3
quartz/styles/base.scss
View File

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