/* ============================================================ blog.scottliu.com — app.css Suite (tokens + base + components) loads first. This file contains ONLY layout and structure unique to this blog. Typography, colors, and reset come from the suite. ============================================================ */ /* --- Blog-specific token overrides --- */ :root { /* Narrower reading column than the suite default (880px). A 720px measure is the right width for long-form prose. */ --page-max: 720px; /* Prose on this blog is long-form; loosen line-height beyond the suite default (1.55) for more comfortable reading. */ --leading-body: 1.7; } /* Headings are bolder on this reading-focused blog */ h1, h2, h3, h4 { font-weight: 700; } /* Suppress underline on hover for navigation and title links — this is a reading site, underlines are reserved for inline body links */ header#site-header nav a:hover, .entry-title a:hover, .stream-title a:hover, .chapter-list a:hover { text-decoration: none; } /* --- Reading modes ------------------------------------------------------- Each page declares what kind of writing it holds via . Different writing wants different measure and leading: technical prose carries figures and code, verse wants a narrow column and air, and a close reading alternates quoted source with commentary. Tuning those here keeps one set of templates instead of a bespoke stylesheet per content type. ------------------------------------------------------------------------- */ body[data-kind="verse"] { --page-max: 640px; } body[data-kind="fiction"] { --page-max: 700px; --leading-body: 1.75; } body[data-kind="reading"] { --page-max: 700px; } /* --- Layout container (blog reading column) --- */ .container { max-width: var(--page-max); margin: 0 auto; padding: var(--space-4) var(--space-3); } /* --- Site header --- */ header#site-header { text-align: center; padding: var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--hairline); } header#site-header .brand { margin-bottom: 0; } header#site-header nav { margin-top: var(--space-2); } /* Five sections no longer fit one fixed-width row on a phone, so the nav is a centered wrapping flex row rather than fixed-width inline blocks. */ header#site-header nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); } header#site-header nav ul li { text-align: center; } header#site-header nav a { font-family: var(--font-head); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 1.5px; color: var(--ink); text-decoration: none; transition: color var(--dur-fast); } header#site-header nav a:hover { color: var(--accent); } header#site-header nav a[aria-current="page"] { color: var(--accent); } /* --- Site footer --- */ footer#site-footer { text-align: center; padding: var(--space-5) var(--space-2); border-top: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--ink-soft); } .footer-links { list-style: none; padding: 0; margin: 0 0 var(--space-3); } .footer-links li { display: inline-block; margin: 0 var(--space-1); } .footer-links a { color: var(--ink-soft); } .footer-links a:hover { color: var(--accent); } .footer-links svg { width: 24px; height: 24px; fill: currentColor; vertical-align: middle; transition: fill var(--dur-fast); } /* --- Main content area --- */ main#site-content { padding: var(--space-5) 0; } /* --- Entry list (every index: blog, readings, poems, novels, front door) --- */ .entry-list { list-style: none; padding: 0; margin: 0; } .entry { margin-bottom: 3.5rem; } /* Reset the suite's top margin on h2 inside list items — the list spacing itself provides the separation */ .entry-title { margin-top: 0; margin-bottom: var(--space-1); } .entry-title a { color: var(--ink); text-decoration: none; } .entry-title a:hover { color: var(--accent); } .entry-meta { font-family: var(--font-head); font-size: var(--text-xs); color: var(--ink-soft); margin-top: calc(-1 * var(--space-1)); margin-bottom: 0; } /* A close reading's meta line names the work, so let the title carry italics. */ .entry-meta cite { font-style: italic; } .entry-summary { margin-top: var(--space-1); } /* --- Full post / chapter article --- */ .post-full .post-meta { font-family: var(--font-head); font-size: var(--text-sm); color: var(--ink-soft); margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4); } .post-full .post-content ul, .post-full .post-content ol { margin-left: var(--space-3); margin-bottom: var(--space-3); } .post-content img { display: block; margin: var(--space-4) auto; max-width: 100%; } /* --- Figures ------------------------------------------------------------ An image in a technical post is an argument, not decoration. A

pairs it with a caption naming what the reader is supposed to notice. The bare `.post-content img` rule above still covers images that stand on their own; inside a figure the margin belongs to the figure instead. ------------------------------------------------------------------------- */ .post-content figure { margin: var(--space-4) 0; } .post-content figure img { margin: 0 auto var(--space-1); } .post-content figcaption { font-family: var(--font-head); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); text-align: center; max-width: 34rem; margin: 0 auto; } /* --- Retrospective note -------------------------------------------------- Later posts in a series sometimes supersede an earlier one's conclusion. Rewriting the old post would erase the mistake that made the later work worth doing, so the original argument stays and this block sits next to it saying what later evidence changed. Warn rather than danger: the claim was reasonable when written, it just did not survive. ------------------------------------------------------------------------- */ .retrospective { margin: var(--space-4) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); border-left: 3px solid var(--warn); border-radius: var(--radius); background: var(--paper-sunken); font-size: var(--text-md); line-height: 1.6; } .retrospective > .retrospective-label { display: block; margin-bottom: var(--space-1); font-family: var(--font-head); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--warn); } .retrospective p { margin: 0 0 var(--space-1); } .retrospective p:last-child { margin-bottom: 0; } /* --- Chapter navigation --- */ .chapter-nav { display: flex; align-items: center; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); font-family: var(--font-head); font-weight: 700; } .chapter-nav a { text-decoration: none; padding: var(--space-1) var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--accent); transition: background var(--dur-fast), border-color var(--dur-fast); } .chapter-nav a:hover { background: var(--accent-weak); border-color: var(--accent); } .chapter-nav .next-link { margin-left: auto; } /* --- Novel TOC chapter list --- */ .chapter-list { list-style: none; padding: 0; margin: 0; } .chapter-list li { margin-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-3); } .chapter-list a { display: flex; align-items: center; text-decoration: none; color: inherit; } .chapter-list a:hover .chapter-title { color: var(--accent); } .chapter-number { font-size: var(--text-2xl); color: var(--hairline); margin-right: var(--space-3); font-family: var(--font-head); flex-shrink: 0; } .chapter-title { font-size: var(--text-xl); color: var(--ink); transition: color var(--dur-fast); } /* --- Poetry --- */ .poem-content { white-space: pre-line; line-height: 1.8; } .poem-content p { margin-bottom: 0; line-height: 1.8; } .poem-content p:first-child { margin-top: 0; } .poem-content.preserve-indent { white-space: pre-wrap; } /* --- Close readings ------------------------------------------------------ An analysis alternates quoted source with commentary. The quote needs to read as a different voice from the surrounding prose, and verse line breaks have to survive Markdown joining them into one paragraph. ------------------------------------------------------------------------- */ /* The work under discussion, named beneath the essay title. */ .reading-subject { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); margin: calc(-1 * var(--space-1)) 0 var(--space-2); padding: var(--space-1) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-family: var(--font-head); font-size: var(--text-sm); color: var(--ink-soft); } .reading-subject-type { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .reading-subject cite { font-style: italic; } /* Quoted verse: preserve the line breaks the author typed. Markdown folds a multi-line quote into one paragraph, so without this every lyric arrives as run-on prose. Reading pages therefore keep prose quotations on one source line — see docs/writing-guides/close-readings.md. */ .reading-content blockquote { margin: var(--space-3) 0; padding-left: var(--space-3); font-size: var(--text-lg); line-height: 1.6; color: var(--ink); } /* pre-line belongs on the paragraph, not the blockquote: Markdown leaves a newline between

and its
, and preserving those would open a blank line above and below every quote. */ .reading-content blockquote p { white-space: pre-line; } /* Each section of a reading opens a new movement; the rule replaces the manual --- separators the drafts used to carry. */ .reading-content h2 { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--hairline); } .reading-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } /* --- Front door ----------------------------------------------------------- */ .front-door { margin-bottom: var(--space-5); } .front-door .lede { max-width: none; margin: 0; } .stream { margin-bottom: var(--space-5); } .stream-header { margin-bottom: var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--hairline); } .stream-title { margin: 0; font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.16em; } .stream-title a { color: var(--ink); } .stream-title a:hover { color: var(--accent); } .stream-blurb { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-soft); } /* The front door is a table of contents, not a reading page — tighten the list rhythm that the full indexes use. */ .stream .entry { margin-bottom: var(--space-3); } .stream .entry-title { font-size: var(--text-xl); } .stream-more { margin: 0; font-family: var(--font-head); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; } /* --- Page headers (novels/poems/readings index) --- */ .page-header { text-align: center; margin-bottom: var(--space-5); } /* --- Responsive --- */ @media (max-width: 768px) { header#site-header nav ul { gap: var(--space-1) var(--space-2); } }