diff --git a/app/globals.css b/app/globals.css index 03b27d1..3027bd3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -15,7 +15,7 @@ /* Fonts — override defaults */ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; - --font-serif: "Merriweather", ui-serif, Georgia, serif; + --font-serif: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Typography scale */ @@ -51,6 +51,36 @@ } } +@layer base { + body { + font-family: var(--font-serif); + font-weight: 400; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-sans); + font-weight: 700; + line-height: 1.25; + letter-spacing: -0.015em; + } + h1 { line-height: 1.15; letter-spacing: -0.025em; } + h2 { line-height: 1.2; letter-spacing: -0.02em; } + code, pre, kbd, samp { + font-family: var(--font-mono); + font-feature-settings: 'liga' 1, 'calt' 1; + } + a { + text-underline-offset: 3px; + text-decoration-thickness: 1px; + transition: text-decoration-thickness 0.15s ease; + } + a:hover { + text-decoration-thickness: 3px; + } +} + /* === Dark mode token overrides === */ .dark { --color-canvas: oklch(0.12 0.02 240); diff --git a/app/layout.tsx b/app/layout.tsx index a2fcd3e..3e45a87 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from 'next' -import { Inter, Merriweather, JetBrains_Mono } from 'next/font/google' +import { Inter, JetBrains_Mono } from 'next/font/google' import { ThemeProvider } from '@wrksz/themes/next' import './globals.css' import 'katex/dist/katex.min.css' @@ -9,17 +9,14 @@ import { ScrollProgress } from '@/components/ui/ScrollProgress' import { Providers } from './providers' const inter = Inter({ + weight: ['300', '400', '500', '600', '700'], + style: ['normal', 'italic'], subsets: ['latin'], display: 'swap', + adjustFontFallback: true, variable: '--font-inter', }) -const merriweather = Merriweather({ - weight: ['400', '700'], - subsets: ['latin'], - display: 'swap', - variable: '--font-merriweather', -}) const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], @@ -34,8 +31,8 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - + +