cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
cd0f20fa2de296b4da6308b4049f858c872d1b83
verified · cmc
author: Christian Cleberg <hello@cleberg.net> · 2026-03-11T05:06:50Z
theme/static/styles.css | 635 +++++++++++++++++++++++++++++++++++++++--------- theme/static/tokens.css | 77 +++--- 2 files changed, 561 insertions(+), 151 deletions(-) @@ -1,106 +1,141 @@ -/* --- Variables & System Logic --- */ -/* All tokens defined in tokens.css — import that first. */ @import url('tokens.css'); -/* --- Layout Architecture --- */ -* { box-sizing: border-box; } +/* ============================================================ + HOMEPAGE INTRO + ============================================================ */ +.homepage-intro { + max-width: var(--prose-w); + margin: 3rem 0; + margin-top: 1rem; + font-family: var(--font-serif); + font-size: var(--text-body); + line-height: var(--lh-body); +} +.homepage-intro p { margin-bottom: 1.1rem; } +.homepage-intro p:first-child { + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.1em; + font-family: var(--font-sans); + color: var(--meta); + margin-bottom: 0.5rem; +} +.homepage-intro p:nth-child(2) { + font-size: 1.3rem; + font-weight: 700; + letter-spacing: -0.01em; + color: var(--fg); + margin-bottom: 1.5rem; +} + +/* ============================================================ + RESET & BASE + ============================================================ */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); - font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; - line-height: 1.6; - max-width: var(--max-width); - margin: 0 auto; - padding: 2rem 1rem; + font-family: var(--font-sans); + font-size: var(--text-body); + line-height: var(--lh-body); + -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } -/* --- Navigation & Footer --- */ -nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; padding-bottom: 0.5rem; } -nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; } -nav a:hover { background: var(--fg); color: var(--bg); } -footer { padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; } - -/* --- Typography (Brutalist) --- */ -h1, h2, h3 { line-height: 1.1; margin-top: 2rem; font-weight: 900; text-transform: uppercase; } -h1 { font-size: 2.2rem; margin-bottom: 1rem; } -h2 { border-left: 10px solid var(--accent); padding-left: 0.75rem; } - -a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } -a:hover { background: var(--accent); color: var(--bg); text-decoration: none; } - -/* --- Weblorg / Template Specifics --- */ -section b { font-size: 0.85rem; text-transform: uppercase; color: var(--meta); margin-top: 0.5rem; } -.post { display: flex; align-items: center; border-bottom: 1px dashed var(--border); padding: 0.5rem 0; } -.post time { font-size: 0.8rem; color: var(--meta); margin-right: 0.5rem; white-space: nowrap; flex-shrink: 0; } -.metadata b { display: block; font-size: 0.7rem; } - -/* --- Org-Mode Tables (Heavy Grid) --- */ -table { width: 100%; border-collapse: collapse; margin: 2rem 0; border: 3px solid var(--fg); } -th, td { border: 1px solid var(--fg); padding: 0.75rem; text-align: left; } -th { background: var(--fg); color: var(--bg); text-transform: uppercase; font-size: 0.8rem; } - -/* --- Code & Pre blocks --- */ -pre { padding: 1rem; border: 1px solid var(--border); background: var(--code-bg); overflow-x: auto; } -code { background: var(--code-bg); padding: 0.2rem 0.4rem; } - -/* Blockquote styling */ -blockquote { - background-color: var(--code-bg); - font-style: italic; - margin: 1.5em 0; - padding: 0; +/* Full-bleed header — border and nav span 100vw */ +header { + width: 100%; } -blockquote p { margin: 0; } -blockquote::before { - content: "#+begin_quote"; - display: block; - color: var(--fg); + +/* Centered content column */ +main, +footer, +header { + max-width: var(--outer-w); + margin: 0 auto; + padding-left: var(--pad); + padding-right: var(--pad); } +main { padding-bottom: 6rem; } +footer { padding-bottom: 3rem; } -blockquote::after { - content: "#+end_quote"; - display: block; - color: var(--fg); +/* Prose constraint — applied to article/page body text only */ +.prose { + max-width: var(--prose-w); } -/* --- Accessibility & Efficiency --- */ -img { max-width: 100%; height: auto; filter: grayscale(1); } -img:hover { filter: grayscale(0); } +/* ============================================================ + MASTHEAD + ============================================================ */ +.masthead { + border-top: 2px solid var(--fg); + padding-top: 1.5rem; + padding-bottom: 0; + padding-left: var(--pad); + padding-right: var(--pad); +} -/* --- Accessibility: Skip Link --- */ -.skip-link { - position: absolute; - top: -100px; /* Hide off-screen */ - left: 50%; - transform: translateX(-50%); - background: var(--fg); - color: var(--bg); - padding: 1rem 2rem; - z-index: 999; - font-weight: 900; - text-transform: uppercase; - border: 3px solid var(--accent); - text-decoration: none; - transition: top 0.2s ease-in-out; +.masthead-title { + display: block; + font-family: var(--font-serif); + font-size: var(--text-display); + font-weight: 700; + line-height: var(--lh-display); + letter-spacing: -0.03em; + text-decoration: none; + color: var(--fg); + margin-bottom: 1.25rem; } +.masthead-title:hover { color: var(--accent); background: none; } -/* Show the link when a user tabs to it */ -.skip-link:focus { - top: 0; - outline: none; /* We use the border and color change as the indicator */ +.masthead-subtitle { + font-family: var(--font-sans); + font-size: var(--text-xs); + letter-spacing: 0.12em; + color: var(--meta); + text-transform: lowercase; + margin-bottom: 1rem; } -/* Ensure the main area doesn't show a blue ring when focused via skip-link */ -#main-content:focus { - outline: none; +/* ============================================================ + NAV STRIP — full outer width, equal cells + ============================================================ */ +.masthead nav { + border-top: 1px solid var(--border-soft); + border-bottom: 1px solid var(--border-soft); +} +.masthead nav ul { + list-style: none; + display: flex; +}.masthead nav li { flex: 1; } +.masthead nav a { + display: block; + text-align: center; + padding: 0.55rem 0; + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + text-decoration: none; + color: var(--meta); + border-right: 1px solid var(--border-soft); + transition: color 0.1s, background 0.1s; } +.masthead nav li:last-child a { border-right: none; } +.masthead nav a:hover { color: var(--bg); background: var(--fg); } -/* --- Horizontal Rule (Koi Divider) --- */ +/* ============================================================ + MAIN CONTENT AREA + ============================================================ */ +main { padding-top: 2rem; } + +/* ============================================================ + KOI HR + ============================================================ */ hr { border: none; - height: 2rem; + height: 2.5rem; position: relative; display: flex; align-items: center; @@ -109,52 +144,432 @@ hr { background-repeat: no-repeat; background-position: center; background-size: auto 100%; + margin: 3rem 0; } - -hr::before, -hr::after { +hr::before, hr::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); - width: calc(50% - 1.75rem); + width: calc(50% - 2rem); height: 1px; - background: var(--fg); + background: var(--border-soft); } - hr::before { left: 0; } hr::after { right: 0; } -/* --- Footnote Alignment --- */ -.footdef { - display: flex; - align-items: flex-start; /* Keeps number at the top if text wraps */ - gap: 1rem; /* Space between number and text */ - margin-bottom: 0.5rem; +/* ============================================================ + FOOTER + ============================================================ */ +footer { + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--meta); + display: flex; + flex-direction: column; + gap: 0.4rem; +} +footer a { color: var(--meta); text-decoration: none; transition: color 0.1s; } +footer a:hover { color: var(--fg); background: none; } + +/* ============================================================ + TYPOGRAPHY + ============================================================ */ +h1, h2, h3, h4 { + font-family: var(--font-serif); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.1; +} + +/* Page-level h1 (blog list, garden, guides) */ +h1 { + font-size: var(--text-h1); + margin-bottom: 0.5rem; +} + +/* Article display title — larger, tighter */ +.article-title { + font-family: var(--font-serif); + font-size: clamp(2.4rem, 5vw, 3.6rem); + font-weight: 700; + line-height: 1.05; + letter-spacing: -0.03em; + margin: 0.4rem 0 0; +} + +h2 { + font-size: var(--text-h2); + border-left: 1px solid var(--accent); + padding-left: 0.75rem; + margin-top: 2.5rem; + margin-bottom: 0.4rem; +} +h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.3rem; } + +p { margin-bottom: 1.2rem; } + +/* Accent ONLY on links and h2 bar — nowhere else */ +a { + color: var(--accent); + text-decoration: underline; + text-underline-offset: 3px; + transition: background 0.1s, color 0.1s; +} +a:hover { background: var(--accent); color: var(--bg); text-decoration: none; } + +/* ============================================================ + SECTION LABEL — uppercase eyebrow text + ============================================================ */ +.label { + display: block; + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--meta); + border-bottom: 1px solid var(--fg); + padding-bottom: 0.5rem; + margin-bottom: 0; +} + +/* ============================================================ + INFO STRIP — homepage identity block + ============================================================ */ + + +/* ============================================================ + POST LIST — numbered, full outer width + ============================================================ */ +.post-list { + list-style: none; + counter-reset: posts; +} +.post-list-item { + counter-increment: posts; + display: grid; + grid-template-columns: 2.5rem 1fr 7rem; + align-items: baseline; + gap: 0 1rem; + padding: 0.75rem 0; + border-bottom: 1px solid var(--border-soft); +} +.post-list-item:first-child { border-top: 1px solid var(--border-soft); } +.post-list-item::before { + content: counter(posts, decimal-leading-zero); + font-family: var(--font-mono); + font-size: var(--text-xs); + color: var(--meta); + letter-spacing: 0.04em; + grid-column: 1; +} +.post-list-item a { + font-size: var(--text-sm); + justify-self: start; +} +.post-list-item time { + font-size: var(--text-xs); + font-family: var(--font-mono); + color: var(--meta); + text-align: right; + white-space: nowrap; + letter-spacing: 0.04em; +} + +/* Year separator — full-width label, resets counter display */ +.post-list-year { + display: block; + font-family: var(--font-sans); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--meta); + padding: 1.5rem 0 0.4rem; + counter-increment: none; +} + +.all-posts-link { + display: inline-block; + margin-top: 1.5rem; + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; +} + +/* ============================================================ + ARTICLE — post page + ============================================================ */ +.article-dateline { + font-family: var(--font-mono); + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--meta); + margin-bottom: 0.35rem; +} + +.article-standfirst { + font-family: var(--font-serif); + font-size: 1.15rem; + line-height: 1.55; + color: var(--fg-soft); + padding: 1.25rem 0; + border-top: 1px solid var(--border-soft); + border-bottom: 1px solid var(--fg); + margin-top: 1rem; + max-width: var(--prose-w); +} + +.article-body { + font-family: var(--font-serif); + font-size: var(--text-body); + line-height: var(--lh-body); + max-width: var(--prose-w); + margin-top: 2.5rem; +} +.article-body p { margin-bottom: 1.3rem; } + +.reply-link { + max-width: var(--prose-w); + margin-top: 4rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border-soft); + font-size: var(--text-xs); + font-family: var(--font-sans); + text-transform: uppercase; + letter-spacing: 0.12em; +} + +/* ============================================================ + GENERIC PAGE (about, uses, etc.) + ============================================================ */ +.page-body { + font-family: var(--font-serif); + font-size: var(--text-body); + line-height: var(--lh-body); + max-width: var(--prose-w); + margin-top: 2rem; +} +.page-body p { margin-bottom: 1.3rem; } + +/* ============================================================ + BLOG ARCHIVE + ============================================================ */ +.blog-meta { + font-size: var(--text-sm); + color: var(--meta); + margin: 0.75rem 0 2rem; +} +.blog-meta code { + font-size: var(--text-xs); + background: var(--code-bg); + padding: 0.1rem 0.35rem; + font-family: var(--font-mono); +} + +/* Year separators in post list */ +.post-list-year { + font-family: var(--font-serif); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.14em; + color: var(--meta); + padding: 1.25rem 0 0.5rem; + list-style: none; + grid-column: 1 / -1; +} + +/* Restore list styling inside content areas */ +.article-body ul, +.article-body ol, +.page-body ul, +.page-body ol { + padding-left: 1.5rem; + margin-bottom: 1.2rem; +} +.article-body li, +.page-body li { + margin-bottom: 0.3rem; +} +.article-body ul ul, +.article-body ol ol, +.page-body ul ul, +.page-body ol ol { + margin-bottom: 0; +} + +/* ============================================================ + GARDEN + ============================================================ */ +.garden-index { list-style: none; } +.garden-index li { + display: flex; + flex-direction: column; + gap: 0.15rem; + padding: 0.8rem 0; + border-bottom: 1px solid var(--border-soft); +} +.garden-index li:first-child { border-top: 1px solid var(--border-soft); } +.garden-index a { font-size: var(--text-sm); } +.garden-desc { font-size: var(--text-xs); color: var(--meta); } + +/* ============================================================ + APP CARDS + ============================================================ */ +.app-card { + display: flex; + gap: 1.25rem; + align-items: flex-start; + padding: 1.25rem 0; + border-bottom: 1px solid var(--border-soft); +} +.app-card:first-of-type { border-top: 1px solid var(--border-soft); } +.app-icon { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; filter: none !important; margin: 0; display: block; } +.app-card a:has(.app-icon):hover { background: none; } +.app-info { display: flex; flex-direction: column; gap: 0.2rem; } +.app-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); } +.app-subtitle { font-size: var(--text-xs); color: var(--meta); } +.app-links { font-size: var(--text-xs); margin-top: 0.3rem; } + +/* ============================================================ + CODE & PRE + ============================================================ */ +pre { + padding: 1.25rem; + border-left: 1px solid var(--border-soft); + background: var(--code-bg); + overflow-x: auto; + font-size: var(--text-sm); + margin: 1.75rem 0; + line-height: 1.6; +} +code { + font-family: var(--font-mono); + background: var(--code-bg); + padding: 0.15rem 0.4rem; + font-size: 0.875em; +} +pre code { background: none; padding: 0; font-size: inherit; } + +/* ============================================================ + BLOCKQUOTE — intentional Org-mode delimiters + ============================================================ */ +blockquote { + font-style: italic; + margin: 1.75rem 0; + padding: 0.75rem 1rem; + border-left: 1px solid var(--border-soft); + background: var(--code-bg); +} +blockquote p:last-child { margin-bottom: 0; } +blockquote p { margin: 0; } +blockquote::before { + content: "#+begin_quote"; + display: block; + color: var(--meta); + font-style: normal; + font-size: var(--text-xs); + font-family: var(--font-mono); + letter-spacing: 0.04em; + margin-bottom: 0.5rem; +} +blockquote::after { + content: "#+end_quote"; + display: block; + color: var(--meta); + font-style: normal; + font-size: var(--text-xs); + font-family: var(--font-mono); + letter-spacing: 0.04em; + margin-top: 0.5rem; } -/* Ensure the paragraph doesn't add its own block margins */ -.footpara { - margin: 0; - flex: 1; - display: flex; - flex-direction: column; - gap: 0.5rem; +/* ============================================================ + TABLES + ============================================================ */ +table { width: 100%; border-collapse: collapse; margin: 2rem 0; } +th, td { + border-bottom: 1px solid var(--border-soft); + padding: 0.65rem 0.75rem; + text-align: left; + font-size: var(--text-sm); +} +th { + border-bottom: 1px solid var(--fg); + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.1em; + font-weight: 700; } +tr:last-child td { border-bottom: none; } -/* -- Garden -- */ +/* ============================================================ + IMAGES + ============================================================ */ +img { + max-width: 100%; + height: auto; + filter: grayscale(1); + transition: filter 0.25s; + display: block; + margin: 2rem 0; +} +img:hover { filter: grayscale(0); } -/* Style the footnote number to be a fixed width for alignment */ +/* ============================================================ + FOOTNOTES + ============================================================ */ +.footdef { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; } +.footpara { margin: 0; flex: 1; font-size: var(--text-sm); } .footnum { - font-weight: bold; - min-width: 1.5rem; - text-align: right; - text-decoration: none; - font-size: 0.85rem; - color: var(--accent); + font-weight: 700; + min-width: 1.5rem; + text-align: right; + text-decoration: none; + font-size: var(--text-xs); + color: var(--meta); + font-family: var(--font-mono); +} + +/* ============================================================ + SKIP LINK + ============================================================ */ +.skip-link { + position: absolute; + top: -100px; + left: 50%; + transform: translateX(-50%); + background: var(--fg); + color: var(--bg); + padding: 0.75rem 1.5rem; + z-index: 999; + font-weight: 700; + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.12em; + text-decoration: none; + transition: top 0.2s; +} +.skip-link:focus { top: 0; outline: none; } +#main-content:focus { outline: none; } + +/* ============================================================ + RESPONSIVE + ============================================================ */ +@media (max-width: 700px) { + .masthead-title { font-size: clamp(3rem, 14vw, 5rem); } + .masthead nav ul { flex-wrap: wrap; } + .masthead nav li { flex: none; width: 50%; } + .masthead nav a { border-bottom: 1px solid var(--border-soft); } + .post-list-item { grid-template-columns: 2.25rem 1fr; } + .post-list-item time { display: none; } + .article-title { font-size: clamp(2rem, 9vw, 2.8rem); } } -@media (max-width: 600px) { - body { padding: 1rem; } - .post { flex-direction: column; align-items: flex-start; } +@media (max-width: 480px) { + .masthead nav li { width: 100%; } } @@ -1,56 +1,51 @@ /* ============================================================================= BRAND TOKENS — cleberg.net - Single source of truth for all design variables. - Import this before any other stylesheet. ============================================================================= */ - :root { color-scheme: light dark; - /* --- Color: Light Mode --- */ - --bg: #F6F4F0; /* Page background */ - --bg-soft: #EDEAE4; /* Subtle surface (inputs, cards) */ - --fg: #111111; /* Primary text, borders, table headers */ - --fg-soft: #555550; /* Secondary text, metadata */ - --accent: #c0392b; /* Interactive: links, h2 border. WCAG AA (4.6:1 on --bg). Text-safe. */ - --salmon: #ee6f5c; /* Decorative only. NOT for body text on light backgrounds. */ - --border: #111111; /* Hard borders (nav, tables) */ - --border-soft: #DDDAD4; /* Dashed/subtle dividers */ - --code-bg: #E8E4DE; /* Code blocks, blockquotes */ - --meta: #555550; /* Timestamps, labels, footnote numbers */ + /* Light */ + --bg: #ffffff; + --bg-soft: #f5f5f5; + --fg: #0a0a0a; + --fg-soft: #444444; + --accent: #c0392b; + --border: #0a0a0a; + --border-soft: #dedede; + --code-bg: #f3f3f3; + --meta: #999999; - /* --- Typography --- */ - --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; - --font-size-base: 1rem; - --font-size-sm: 0.85rem; - --font-size-xs: 0.8rem; - --font-weight-heavy: 900; - --line-height: 1.6; + /* Fonts */ + --font-serif: Georgia, 'Times New Roman', serif; + --font-sans: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; + --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; - /* --- Layout --- */ - --max-width: 800px; - --space-xs: 0.5rem; - --space-sm: 1rem; - --space-md: 2rem; - --space-lg: 4rem; + /* Type scale */ + --text-display: clamp(4rem, 8vw, 6.5rem); + --text-h1: clamp(2.2rem, 4vw, 3rem); + --text-h2: 1.2rem; + --text-body: 1.0625rem; + --text-sm: 0.875rem; + --text-xs: 0.6875rem; /* 11px — label tier */ + --lh-display: 0.95; + --lh-body: 1.75; - /* --- Borders --- */ - --border-width-hard: 3px; /* Tables, skip-link */ - --border-width-nav: 4px; /* Nav underline */ - --border-width-h2: 10px; /* h2 left accent bar */ + /* Layout */ + --outer-w: 1000px; + --prose-w: 720px; + --pad: clamp(1.25rem, 4vw, 2.5rem); } @media (prefers-color-scheme: dark) { :root { - --bg: #161412; - --bg-soft: #1F1C1A; - --fg: #F0EDE8; - --fg-soft: #888580; - --accent: #ee6f5c; /* Salmon is WCAG AA on dark bg (~4.5:1 on #161412). Text-safe in dark mode. */ - --salmon: #ee6f5c; - --border: #2C2825; - --border-soft: #2C2825; - --code-bg: #0F0D0C; - --meta: #888580; + --bg: #080808; + --bg-soft: #111111; + --fg: #eeebe6; + --fg-soft: #aaa8a3; + --accent: #e05a48; + --border: #eeebe6; + --border-soft: #1e1e1e; + --code-bg: #0d0d0d; + --meta: #555555; } }