/* rogue.gg — stark brutalist one stylesheet, no frameworks, ~5kb gzipped variant: 2A · Index Table / Mono Body — palette: stark tokens are the only abstraction; everything else is plain html */ :root { /* palette — stark */ --bg: #ffffff; --ink: #0a0a0a; --sub: #454545; --mute: #707070; --rule: #0a0a0a; --dot: #cfcfcf; --link: #0000ee; --visited: #551a8b; --accent: #a40000; --code-bg: #0a0a0a; --code-ink: #e8e6df; --quote-bg: #f0f0f0; --mark-bg: #ffff66; /* type — JetBrains Mono throughout, Times for long-form essays if ever needed */ --mono: "JetBrains Mono", "iA Writer Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --serif: "iowan old style", "Iowan Old Style", "Charter", Charter, Georgia, "Times New Roman", Times, serif; /* scale — 16px base, 1.5 line-height (research floor) */ --t-meta: 12.5px; --t-body: 16px; --t-h3: 17px; --t-h2: 21px; --t-h1: 32px; --t-display: 44px; --lh-body: 1.7; /* mono body wants more leading */ --lh-head: 1.2; /* layout — 66 cpl (Bringhurst) when single column at 16px mono */ --measure: 64ch; --gutter: clamp(20px, 5vw, 48px); --rail: 220px; /* sidenote rail */ /* focus — for keyboard navigation */ --focus: 2px solid var(--accent); } @media (prefers-color-scheme: dark) { /* opt-in only via .force-dark on ; default stays stark. hosting note: leave commented unless you want auto-dark. */ } /* ── reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--mono); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); font-feature-settings: "ss01", "calt", "liga"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: none; border-top: 1px solid var(--rule); margin: 32px 0; } h1, h2, h3 { font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; } p { margin: 0 0 1em; text-wrap: pretty; } :focus-visible { outline: var(--focus); outline-offset: 2px; } /* ── links ────────────────────────────────────────────────────────────── */ a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:visited { color: var(--visited); } a:hover { background: var(--ink); color: var(--bg); text-decoration: none; } a:focus-visible { background: var(--accent); color: var(--bg); outline: none; } /* ── layout primitives ────────────────────────────────────────────────── */ .shell { width: 100%; max-width: 1100px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter); } .bar { /* the meta strip above the masthead — file path / breadcrumb */ font-size: var(--t-meta); color: var(--mute); margin-bottom: 14px; } .masthead { border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 0 22px; padding: 12px 0 10px; } .masthead h1 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 4px; letter-spacing: -0.02em; } .masthead .tagline { color: var(--sub); font-size: 13.5px; margin: 0; } .nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; margin: 0 0 28px; } /* ── home: index table ────────────────────────────────────────────────── */ .index { width: 100%; border-collapse: collapse; font-size: 14px; } .index thead th { text-align: left; font-weight: 700; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; text-transform: lowercase; letter-spacing: 0; } .index tbody td { padding: 10px 8px 10px 0; border-bottom: 1px dotted var(--dot); vertical-align: top; } .index .col-date { width: 11ch; color: var(--sub); white-space: nowrap; } .index .col-topic { width: 13ch; color: var(--ink); } .index .col-read { width: 7ch; color: var(--mute); text-align: right; white-space: nowrap; } .index a.entry { font-size: 15px; } @media (max-width: 640px) { .index thead .col-read { display: none; } .index tbody .col-read { display: none; } .index .col-date { width: 10ch; font-size: 12px; } .index .col-topic { display: none; } .index a.entry { font-size: 14px; display: block; } .index tbody td.col-title::after { content: " · " attr(data-topic) " · " attr(data-read); color: var(--mute); font-size: 11.5px; display: block; margin-top: 2px; } } .older { margin-top: 18px; font-size: var(--t-meta); color: var(--mute); } .older a { margin-right: 14px; } /* topic grouping — collapsed by section, optional */ .section-label { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); margin: 28px 0 10px; } /* topic-page intro paragraph — sits below nav, above index */ .topic-intro { font-size: 15px; line-height: 1.55; color: var(--sub); max-width: 72ch; margin: 0 0 28px; } /* nav: current-page link is inverted as a quiet indicator */ .nav a[aria-current="page"] { background: var(--ink); color: var(--bg); text-decoration: none; } .nav a[aria-current="page"]:hover { background: var(--accent); } /* generic page-body container — for About/Hire/Editorial/Recommendations. Width matches the shell so tables and wide content can use full width. Prose paragraphs are constrained per-element to keep reading lines sane (~64ch) without forcing the whole container narrow. */ .page-body { max-width: 100%; font-size: var(--t-body); line-height: var(--lh-body); } .page-body > p, .page-body > ul, .page-body > ol, .page-body > blockquote { max-width: 64ch; } .page-body h2 { font-size: var(--t-h2); margin: 36px 0 12px; padding-top: 12px; border-top: 1px solid var(--rule); } .page-body h3 { font-size: var(--t-h3); margin: 24px 0 8px; } .page-body p { margin: 0 0 16px; } .page-body ul, .page-body ol { padding-left: 22px; margin: 0 0 16px; } .page-body li { margin-bottom: 6px; } .page-body code { background: var(--quote-bg); font-size: 0.92em; padding: 0.05em 0.35em; } /* definition list — used for "what I don't do" / FAQ / spec sheets */ .spec { display: grid; grid-template-columns: 14ch 1fr; gap: 12px 22px; margin: 0 0 22px; font-size: var(--t-body); } .spec dt { font-weight: 700; color: var(--ink); } .spec dd { margin: 0; color: var(--sub); } @media (max-width: 640px) { .spec { grid-template-columns: 1fr; gap: 4px; } .spec dt { margin-top: 10px; } .spec dd { margin-bottom: 4px; } } /* article-body tables — for checklists, comparison grids, etc. Same DNA as .index but a touch denser. */ .article-body table, .page-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 18px 0 22px; } .article-body th, .page-body th { text-align: left; font-weight: 700; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; } .article-body td, .page-body td { padding: 8px 10px 8px 0; border-bottom: 1px dotted var(--dot); vertical-align: top; color: var(--sub); } .article-body td.flag, .page-body td.flag { color: var(--accent); font-weight: 700; white-space: nowrap; width: 14ch; } /* checklist (task-list) — squared boxes, plaintext, prints right */ ol.checklist, ul.checklist { list-style: none; padding-left: 0; margin: 14px 0 22px; } ol.checklist li, ul.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 0 10px; padding: 8px 0; border-bottom: 1px dotted var(--dot); align-items: start; } ol.checklist li::before, ul.checklist li::before { content: "[ ]"; font-family: var(--mono); color: var(--ink); font-weight: 700; line-height: var(--lh-body); } ol.checklist li.done::before, ul.checklist li.done::before { content: "[x]"; color: var(--accent); } ol.checklist li > strong { display: block; margin-bottom: 2px; } /* admonition — for warnings/notes in technical pieces */ .note, .warn { border: 1px solid var(--rule); padding: 12px 14px; margin: 18px 0; font-size: 14.5px; line-height: 1.55; } .note { border-left-width: 4px; } .warn { border-left-width: 4px; border-left-color: var(--accent); } .note .label, .warn .label { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-right: 8px; } .warn .label { color: var(--accent); } /* ── article ──────────────────────────────────────────────────────────── */ /* The article fills the shell, exactly like the homepage. Sidenotes float into a reserved gutter on the right; on narrow viewports the gutter collapses and sidenotes become inline notes below their paragraph. */ .article { position: relative; } /* Article header — same pattern as the homepage masthead. Top + bottom rule, h1, dek (tagline), then a meta strip below. */ .article-head { border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0 10px; margin: 0 0 14px; } .article-head h1 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 4px; letter-spacing: -0.02em; line-height: 1.1; } .article-head .dek { color: var(--sub); font-size: 13.5px; margin: 0; line-height: 1.45; max-width: 68ch; } .article-meta { font-size: var(--t-meta); color: var(--mute); display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 28px; } .article-meta .sep { color: var(--dot); } /* Article body — full shell width. The sidenote rail is no longer in use; if it's reintroduced later, re-add `padding-right: calc(var(--rail) + 24px)` and a `@media (max-width: 1000px) { padding-right: 0; }` reset. Prose is constrained per-element below to keep reading lines around 64ch. */ .article-body { font-size: var(--t-body); line-height: var(--lh-body); max-width: 100%; } .article-body > p, .article-body > ul, .article-body > ol, .article-body > blockquote { max-width: 64ch; } .article-body h2 { font-size: var(--t-h2); margin: 36px 0 12px; padding-top: 12px; border-top: 1px solid var(--rule); } .article-body h3 { font-size: var(--t-h3); margin: 26px 0 8px; } .article-body p { margin: 0 0 16px; } .article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 16px; } .article-body li { margin-bottom: 6px; } .article-body blockquote { background: var(--quote-bg); border-left: 3px solid var(--ink); margin: 22px 0; padding: 12px 16px; font-style: italic; } .article-body blockquote p:last-child { margin-bottom: 0; } .article-body strong { font-weight: 700; } .article-body em { font-style: italic; } .article-body mark { background: var(--mark-bg); padding: 0 2px; } /* code blocks */ .article-body pre { background: var(--code-bg); color: var(--code-ink); padding: 14px 16px; font-size: 13.5px; line-height: 1.55; margin: 16px 0 18px; overflow-x: auto; border-radius: 0; } .article-body code { background: var(--quote-bg); font-size: 0.92em; padding: 0.05em 0.35em; } .article-body pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; } /* figures */ .article-body figure { margin: 22px 0; } .article-body figure img { border: 1px solid var(--rule); } .article-body figcaption { font-size: 12.5px; color: var(--sub); margin-top: 6px; text-align: left; } /* sidenotes — Tufte style. The sidenote lives inside the paragraph it annotates, and floats right into the reserved gutter. Because float anchors to the parent's content position, it lines up with that paragraph automatically. */ .sidenote { float: right; clear: right; width: var(--rail); /* Pull right by (rail + 24px gutter), leaving 24px breathing room from the body column edge. Negative right margin pulls into the reserved gap. */ margin: 0 calc(-1 * (var(--rail) + 24px)) 14px 24px; font-size: 12.5px; line-height: 1.55; color: var(--sub); border-left: 1px solid var(--rule); padding-left: 12px; } .sidenote .marker { color: var(--accent); font-weight: 700; margin-right: 4px; font-family: var(--mono); } /* Below the rail-fit breakpoint, drop the float — render as an inline note right where the parent paragraph ends. */ @media (max-width: 1000px) { .sidenote { float: none; clear: none; width: auto; margin: 10px 0 18px; padding: 4px 0 4px 14px; border-left: 3px solid var(--rule); display: block; font-size: 13px; } } /* inline footnote markers */ sup.fn { font-family: var(--mono); font-size: 0.7em; color: var(--accent); margin-left: 1px; } sup.fn a { color: var(--accent); text-decoration: none; } sup.fn a:hover { background: var(--accent); color: var(--bg); } /* references block at bottom of article */ .refs { clear: both; border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 18px; font-size: 13px; color: var(--sub); line-height: 1.7; } .refs h3 { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; } .refs ol { padding-left: 22px; margin: 0; } .refs li { margin-bottom: 6px; } .refs li::marker { color: var(--accent); font-weight: 700; } /* article footer — colophon / next-prev / hire */ .colophon { clear: both; border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; color: var(--sub); } @media (max-width: 640px) { .colophon { grid-template-columns: 1fr; } } .colophon h4 { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; font-weight: 700; } /* hire-me CTA — restrained, never above-the-fold */ .hire { border: 1px solid var(--rule); padding: 16px 18px; margin: 28px 0; font-size: 14px; } .hire h4 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } .hire p { margin: 0 0 8px; color: var(--sub); } .hire a.cta { display: inline-block; border: 1px solid var(--ink); padding: 6px 12px; font-weight: 700; text-decoration: none; color: var(--ink); } .hire a.cta:hover { background: var(--ink); color: var(--bg); } /* site footer */ .site-foot { border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 18px; font-size: 12.5px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px 22px; } /* ── print — articles map directly to a page ──────────────────────────── */ @media print { :root { --bg: #fff; --ink: #000; --link: #000; --sub: #222; --mute: #444; --code-bg: #fff; --code-ink: #000; --quote-bg: #fff; } body { font-size: 11pt; line-height: 1.5; } .nav, .hire, .site-foot, .older, .colophon { display: none; } .article { max-width: 100%; } .sidenote { float: none; clear: none; width: auto; border-left: 2px solid #000; margin: 8px 0 12px; padding: 4px 0 4px 10px; font-size: 9.5pt; } .article-body pre { border: 1px solid #000; color: #000; background: #fff; font-size: 9pt; } a { text-decoration: none; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } h2 { page-break-after: avoid; } pre, blockquote, figure { page-break-inside: avoid; } .article-head { border-bottom: 2px solid #000; padding-bottom: 10px; } } /* ── accessibility helpers ────────────────────────────────────────────── */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 6px 10px; z-index: 100; } .skip:focus { left: 8px; top: 8px; }