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

feat: swap Merriweather → Inter + define @layer base

Browse Source 
- Remove Merriweather font import and config from layout.tsx
- Add Inter with weight/style/adjustFontFallback
- Apply inter.className to body instead of font-serif
- Update --font-serif in @theme to use Inter
- Add @layer base with body, h1-h6, code, and link rules
This commit is contained in:
Krishna Ayyalasomayajula
2026-06-01 22:34:02 -05:00
parent 769a52b924
commit 04adc7b896
2 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/globals.css
View File

@@ -15,7 +15,7 @@
/* Fonts — override defaults */ /* Fonts — override defaults */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --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; --font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Typography scale */ /* 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 mode token overrides === */
.dark { .dark {
--color-canvas: oklch(0.12 0.02 240); --color-canvas: oklch(0.12 0.02 240);

15
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from 'next' 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 { ThemeProvider } from '@wrksz/themes/next'
import './globals.css' import './globals.css'
import 'katex/dist/katex.min.css' import 'katex/dist/katex.min.css'
@@ -9,17 +9,14 @@ import { ScrollProgress } from '@/components/ui/ScrollProgress'
import { Providers } from './providers' import { Providers } from './providers'
const inter = Inter({ const inter = Inter({
weight: ['300', '400', '500', '600', '700'],
style: ['normal', 'italic'],
subsets: ['latin'], subsets: ['latin'],
display: 'swap', display: 'swap',
adjustFontFallback: true,
variable: '--font-inter', variable: '--font-inter',
}) })
const merriweather = Merriweather({
weight: ['400', '700'],
subsets: ['latin'],
display: 'swap',
variable: '--font-merriweather',
})
const jetbrainsMono = JetBrains_Mono({ const jetbrainsMono = JetBrains_Mono({
subsets: ['latin'], subsets: ['latin'],
@@ -34,8 +31,8 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en" className={`${inter.variable} ${merriweather.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning> <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
<body className="antialiased bg-canvas text-ink font-serif"> <body className={`antialiased bg-canvas text-ink ${inter.className}`}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"