Colours move into theme tokens (light values in :root, dark in [data-theme=dark]); the closing contact band inverts on each theme. The choice is stored in localStorage and applied by a head script before the first paint. Voxel covers and image shadows follow the theme. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import localFont from 'next/font/local'
|
|
import './globals.css'
|
|
|
|
// Both fonts are bundled (SIL Open Font License), so building never depends on the network.
|
|
const display = localFont({ src: './fonts/BricolageGrotesque-Variable.woff2', variable: '--font-display', weight: '200 800', display: 'swap' })
|
|
const text = localFont({ src: './fonts/InstrumentSans-Variable.woff2', variable: '--font-text', weight: '400 700', display: 'swap' })
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Emil Shanayev — Resume',
|
|
description: 'Resume of Emil Shanayev: backend, DevOps, AI systems, scientific software and game technology.',
|
|
authors: [{ name: 'Emil Shanayev' }],
|
|
}
|
|
|
|
// Dark is the default theme; a stored choice of "light" is applied before the first paint so the page never flashes.
|
|
const THEME_SCRIPT = "try{if(localStorage.getItem('theme')==='light')document.documentElement.dataset.theme='light'}catch(e){}"
|
|
|
|
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
|
return (
|
|
<html lang="en" data-theme="dark" className={`${display.variable} ${text.variable}`} suppressHydrationWarning>
|
|
<head>
|
|
<script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
|
|
</head>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|