refactor: replace pixel-based TOC sidebar width and sticky offset with flexible values
This commit is contained in:
@@ -36,7 +36,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
|
|||||||
<ScrollToTop />
|
<ScrollToTop />
|
||||||
<ReadingProgress />
|
<ReadingProgress />
|
||||||
<div className="mx-auto max-w-6xl px-6 py-16">
|
<div className="mx-auto max-w-6xl px-6 py-16">
|
||||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_220px] lg:gap-12">
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
|
||||||
<article className="min-w-0">
|
<article className="min-w-0">
|
||||||
<header className="mb-12">
|
<header className="mb-12">
|
||||||
<time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
|
<time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ export function TableOfContents() {
|
|||||||
if (headings.length === 0) return null;
|
if (headings.length === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav aria-label="Table of contents" className="lg:sticky lg:top-[var(--header-height)]">
|
<nav aria-label="Table of contents" className="lg:sticky lg:top-20">
|
||||||
<h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
|
<h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
|
||||||
On this page
|
On this page
|
||||||
</h4>
|
</h4>
|
||||||
|
|||||||
Reference in New Issue
Block a user