fix: use CSS variable for TOC sticky offset instead of hardcoded pixels

2026-06-01 23:45:53 -05:00
parent 2c6cbe96d9
commit 74dfb82069
2 changed files with 2 additions and 1 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -73,6 +73,7 @@
    scroll-padding-top: 96px;
  }
  body {
+    --header-height: 56px;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.6;
--- a/components/blog/TableOfContents.tsx
+++ b/components/blog/TableOfContents.tsx
@@ -58,7 +58,7 @@ export function TableOfContents() {
  if (headings.length === 0) return null;

  return (
-    <nav className="lg:sticky lg:top-[72px]">
+    <nav className="lg:sticky lg:top-[var(--header-height)]">
      <h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
        On this page
      </h4>