From 852640a574a254da5283c7538e7b048fa9a0203a Mon Sep 17 00:00:00 2001 From: Christian Gick Date: Fri, 3 Apr 2026 13:01:03 +0300 Subject: [PATCH] feat: Newsreader serif typography + Agiliton brand colors - Add Newsreader font (darioamodei.com-inspired literary serif) - Warm light background (#fafaf9) with Agiliton lime/emerald accents - 20px body text, 32px line-height for research publication feel - Sans-serif UI elements (nav, tags, TOC) for contrast - 800px max content width for focused reading - Status badges updated to green palette Co-Authored-By: Claude Opus 4.6 (1M context) --- assets/css/custom.css | 164 ++++++++++++++++++++++++++++++ layouts/partials/extend-head.html | 5 + 2 files changed, 169 insertions(+) create mode 100644 assets/css/custom.css diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..1643988 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,164 @@ +/* Internet for Kids — Newsreader typography (darioamodei.com-inspired) + Warm, literary, research-publication feel */ + +:root { + --ifk-font: 'Newsreader', 'Times New Roman', serif; + --ifk-text: #1c1917; + --ifk-bg: #fafaf9; + --ifk-accent: #4d7c0f; + --ifk-accent-hover: #3f6212; + --ifk-secondary: #059669; +} + +/* Global background */ +body { + background-color: var(--ifk-bg) !important; + color: var(--ifk-text) !important; +} + +/* Override Congo's dark bg classes */ +.bg-neutral { + background-color: var(--ifk-bg) !important; +} + +/* All text in Newsreader */ +body, p, li, td, th, blockquote, figcaption { + font-family: var(--ifk-font) !important; + font-size: 20px; + line-height: 32px; + color: var(--ifk-text); +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--ifk-font) !important; + color: var(--ifk-text); + font-weight: 600; +} + +h1, .article-title { + font-size: 2rem; + line-height: 1.15; + font-weight: 600; + margin-bottom: 1.5rem; +} + +h2 { + font-size: 1.5rem; + line-height: 1.3; + margin-top: 2.5rem; + margin-bottom: 1rem; +} + +h3 { + font-size: 1.25rem; + line-height: 1.35; + margin-top: 2rem; +} + +/* Article content — constrain width for readability */ +article .prose, +article .content, +.article-content { + max-width: 800px; +} + +/* Paragraphs */ +article p { + margin-bottom: 1.5rem; +} + +/* Links — subtle, Amodei-style */ +article a { + color: var(--ifk-accent); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 2px; +} + +article a:hover { + color: var(--ifk-accent-hover); + text-decoration-thickness: 2px; +} + +/* Blockquotes — elegant left-border */ +blockquote { + font-family: var(--ifk-font) !important; + font-style: italic; + font-size: 20px; + line-height: 32px; + border-left: 3px solid var(--ifk-secondary); + padding-left: 1.5rem; + margin: 2rem 0; + color: var(--ifk-text); + opacity: 0.85; +} + +/* Navigation — keep sans-serif for UI elements */ +nav, nav a, nav span, +header, header a, +footer, footer a, footer span, +.breadcrumbs, .taxonomy-list, +.article-meta, .post-meta, +time, .reading-time { + font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important; + font-size: 0.875rem; +} + +/* Header title */ +header a[href="/"] span, +header a[rel="me"] { + font-family: var(--ifk-font) !important; + font-size: 1.1rem; + font-weight: 500; +} + +/* Tags/categories — small sans pills */ +.taxonomy-term, [href*="/tags/"], [href*="/categories/"] { + font-family: system-ui, -apple-system, sans-serif !important; + font-size: 0.75rem !important; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Table of contents — smaller sans */ +#TableOfContents, #TableOfContents a { + font-family: system-ui, -apple-system, sans-serif !important; + font-size: 0.85rem !important; + line-height: 1.6; +} + +/* Homepage recent articles */ +.summary { + font-family: var(--ifk-font) !important; + font-size: 18px; + line-height: 28px; +} + +/* Data tables in articles — keep readable */ +.csm-table, .csm-table td, .csm-table th { + font-family: var(--ifk-font) !important; + font-size: 16px; + line-height: 1.5; +} + +/* Stats banner — override with sans for numbers */ +.ifk-stat-num { + font-family: var(--ifk-font) !important; +} + +.ifk-stat-label { + font-family: system-ui, -apple-system, sans-serif !important; +} + +/* Chart labels keep sans */ +.ifk-chart-card h4 { + font-family: system-ui, -apple-system, sans-serif !important; +} + +/* Smooth dark mode override (if ever enabled) */ +/* Status badges keep their blue palette */ +.csm-enforced { background: var(--ifk-accent) !important; } +.csm-passed { background: var(--ifk-secondary) !important; } +.csm-progress { background: #86efac !important; color: #14532d !important; } +.csm-guidelines { background: #d1fae5 !important; color: #065f46 !important; } diff --git a/layouts/partials/extend-head.html b/layouts/partials/extend-head.html index 1f1ff0d..6051742 100644 --- a/layouts/partials/extend-head.html +++ b/layouts/partials/extend-head.html @@ -1,3 +1,8 @@ +{{/* Newsreader serif font (Dario Amodei-inspired typography) */}} + + + + {{/* Structured data for SEO + AI search */}} {{ partial "structured-data.html" . }}