fix: unify heading typography with utility classes + add h4-h6
- app/page.tsx: h2 uses heading-md (was text-2xl font-semibold) - app/not-found.tsx: h1 uses heading-xl (was text-4xl font-bold) - Header.tsx: logo uses heading-sm (was text-xl font-extrabold) - mdx-components.tsx: add h4/h5/h6 component overrides - Remove all ad-hoc font-sans from headings
This commit is contained in:
@@ -7,7 +7,7 @@ export default function NotFound() {
|
||||
<main className="min-h-screen flex items-center justify-center px-6">
|
||||
<div className="text-center">
|
||||
<p className="font-mono text-sm text-ink-soft mb-4">404</p>
|
||||
<h1 className="font-sans text-4xl font-bold tracking-tight text-ink mb-4">Page not found</h1>
|
||||
<h1 className="heading-xl text-ink mt-0 mb-4">Page not found</h1>
|
||||
<p className="text-ink-soft mb-8">The page you{`'`}re looking for doesn{`'`}t exist.</p>
|
||||
<Link href="/" className="inline-block rounded-lg bg-ink px-6 py-3 text-sm font-medium text-canvas hover:opacity-80 transition-opacity">
|
||||
Go home
|
||||
|
||||
@@ -17,7 +17,7 @@ export default async function HomePage() {
|
||||
</p>
|
||||
</header>
|
||||
<section>
|
||||
<h2 className="font-sans text-2xl font-semibold tracking-tight text-ink mb-8">
|
||||
<h2 className="heading-md text-ink mb-8">
|
||||
Latest Posts
|
||||
</h2>
|
||||
<PostList posts={posts} />
|
||||
|
||||
@@ -18,7 +18,7 @@ export function Header() {
|
||||
className="sticky top-0 z-50 bg-canvas/80 backdrop-blur-sm border-b border-border"
|
||||
>
|
||||
<div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<Link href="/" className="font-sans text-xl font-extrabold tracking-tight text-ink hover:text-accent transition-colors">
|
||||
<Link href="/" className="heading-sm text-ink hover:text-accent transition-colors">
|
||||
blog
|
||||
</Link>
|
||||
<div className="flex items-center gap-8">
|
||||
|
||||
@@ -19,6 +19,15 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
|
||||
{props.children}
|
||||
</h3>
|
||||
),
|
||||
h4: ({ children, ...props }) => (
|
||||
<h4 className="heading-sm text-ink mt-8 mb-3" {...props}>{children}</h4>
|
||||
),
|
||||
h5: ({ children, ...props }) => (
|
||||
<h5 className="text-base font-semibold text-ink mt-6 mb-2" {...props}>{children}</h5>
|
||||
),
|
||||
h6: ({ children, ...props }) => (
|
||||
<h6 className="text-sm font-medium uppercase tracking-wider text-ink-soft mt-6 mb-2" {...props}>{children}</h6>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<p className="leading-7 [&:not(:first-child)]:mt-6 text-ink">
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user