sunzhongyi
1f09bba3ef
- 18 React components (Layout/Section/Article/Layer/Masthead/Rule + Headline/Subhead/Kicker/BodyText/Quote/Byline/Dateline/Caption + Image/Figure/Video/PullQuote) - Theme: warm off-white palette, Source Serif 4 / Cormorant Garamond / Inter / Noto Serif SC/JP, visual weight mapping, dark mode - Docs: Landing page, 6 Blocks (zh/en/jp), component API docs - GitHub Pages deployment via static export Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
63 lines
1.8 KiB
CSS
63 lines
1.8 KiB
CSS
:root {
|
|
/* font families */
|
|
--font-family-masthead: "Cormorant Garamond", "Playfair Display", Georgia, serif;
|
|
--font-family-blackletter: "UnifrakturMaguntia", "Cormorant Garamond", serif;
|
|
--font-family-display: "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
--font-family-headline: "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
--font-family-body: "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
--font-family-meta: "Inter", system-ui, sans-serif;
|
|
|
|
/* CJK font families */
|
|
--font-family-cjk-serif: "Noto Serif SC", "Noto Serif JP", "Source Serif 4", serif;
|
|
--font-family-cjk-jp: "Noto Serif JP", "Source Serif 4", serif;
|
|
|
|
/* CJK accent (Chinese newspaper red, restrained) */
|
|
--nui-accent-cjk-red: #CC2929;
|
|
|
|
/* page background */
|
|
--nui-bg-page: #F7F4ED;
|
|
--nui-bg-surface: #FBF9F4;
|
|
|
|
/* text */
|
|
--nui-text-primary: #1A1A1A;
|
|
--nui-text-body: #22201C;
|
|
--nui-text-secondary: #4A4742;
|
|
--nui-text-muted: #6E6A63;
|
|
--nui-text-quote: #2E2A24;
|
|
|
|
/* rules */
|
|
--nui-rule-hairline: #C9C2B2;
|
|
--nui-rule-decorative: #1A1A1A;
|
|
|
|
/* accents */
|
|
--nui-accent-primary: #7A1F1F;
|
|
--nui-accent-ink-blue: #1B2A4A;
|
|
--nui-highlight: #F2E9C8;
|
|
|
|
/* spacing */
|
|
--nui-gutter: 1.5rem;
|
|
--nui-space-1: 0.25rem;
|
|
--nui-space-2: 0.5rem;
|
|
--nui-space-3: 0.75rem;
|
|
--nui-space-4: 1rem;
|
|
--nui-space-6: 1.5rem;
|
|
--nui-space-8: 2rem;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--nui-bg-page: #14110D;
|
|
--nui-bg-surface: #1C1812;
|
|
--nui-text-primary: #EDE6D6;
|
|
--nui-text-body: #DCD4C2;
|
|
--nui-text-secondary: #A89F8C;
|
|
--nui-text-muted: #857C6A;
|
|
--nui-text-quote: #DCD4C2;
|
|
--nui-rule-hairline: #3A352C;
|
|
--nui-rule-decorative: #EDE6D6;
|
|
--nui-accent-primary: #C97A6E;
|
|
--nui-accent-ink-blue: #7E94C2;
|
|
--nui-highlight: #3A2F18;
|
|
}
|
|
|
|
html, body { background: var(--nui-bg-page); color: var(--nui-text-body); }
|