marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace hardcoded scroll offset pixels with CSS custom property

Browse Source
This commit is contained in:
kbot
2026-06-03 21:52:53 -05:00
parent 29c89cf891
commit 64d9eb2474
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/globals.css
View File

@@ -3,6 +3,10 @@
/* Dark mode: class-based (for @wrksz/themes) */ /* Dark mode: class-based (for @wrksz/themes) */
@custom-variant dark (&:is(.dark)); @custom-variant dark (&:is(.dark));
:root {
--scroll-offset: 7.5rem; /* ~120px, generous offset for sticky header */
}
/* === Design Tokens === */ /* === Design Tokens === */
@theme { @theme {
/* Colors — Light mode defaults */ /* Colors — Light mode defaults */
@@ -71,10 +75,9 @@
@layer base { @layer base {
html { html {
scroll-padding-top: 96px; scroll-padding-top: var(--scroll-offset);
} }
body { body {
--header-height: 56px;
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
line-height: 1.6; line-height: 1.6;
@@ -185,7 +188,7 @@
.prose :where(h1, h2, h3, h4, h5, h6) { .prose :where(h1, h2, h3, h4, h5, h6) {
color: var(--color-ink); color: var(--color-ink);
scroll-margin-top: 96px; scroll-margin-top: var(--scroll-offset);
} }
.prose :where(h1) { margin: 2.75rem 0 1rem; } .prose :where(h1) { margin: 2.75rem 0 1rem; }