From ee8c1dc96803fcd189d439080713b8a98616a40f Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 05 Apr 2025 18:38:50 +0000
Subject: [PATCH] chore(css): style tweaks for overflow
---
quartz/styles/base.scss | 3 ++-
quartz/components/styles/backlinks.scss | 4 ++--
quartz/components/scripts/popover.inline.ts | 14 +++++++-------
quartz/components/styles/toc.scss | 19 ++++++-------------
4 files changed, 17 insertions(+), 23 deletions(-)
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index d02b0b7..56d2c96 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -12,7 +12,7 @@
clearActivePopover()
const link = this
- link.id = `backlink-${randomIdNonSecure()}`
+ const id = randomIdNonSecure()
if (link.dataset.noPopover === "true") {
return
}
@@ -27,8 +27,8 @@
})
}
- 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 @@
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 @@
}
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
diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
index c8c862f..478e118 100644
--- a/quartz/components/styles/backlinks.scss
+++ b/quartz/components/styles/backlinks.scss
@@ -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 {
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index bf1bc22..6a7723b 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -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 @@
}
}
-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;
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 16383d5..60d2d8f 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -238,6 +238,7 @@
padding: 0;
& > * {
flex: 1;
+ max-height: 24rem;
}
& > .toc {
display: none;
@@ -577,7 +578,7 @@
clear: both;
& > li.overflow-end {
- height: 1rem;
+ height: 0.5rem;
margin: 0;
}
--
Gitblit v1.10.0