/* 08-pages/_article.css — the article page template: a frontmatter-style document header (title + summary + epigraph between horizontal rules), then a two-column body — a sticky contents rail on the left (reusing c-toc + scrollspy) and left-aligned prose sections with modest heading sizes (an article, not a hero landing). Every post is drawn on this template (app/views/posts/show.html.erb); no page is hand-built on it. */ .p-article { display: flex; flex-direction: column; gap: var(--space-2xl); } /* The two-column body reuses the o-split--docs object: a 12rem contents rail, then one body column. The object is named for the docs page it was first cut for, which is a post like any other now — the shape it names is the rail-and-column split, not that page. Prose bounds itself at --measure; figures and tables take the whole body column, flowing out past the prose over the right gutter — never over the rail. */ /* ── Frontmatter — the document header, fenced by rules like a markdown frontmatter block */ .p-article__frontmatter { display: flex; flex-direction: column; gap: var(--space-lg); margin-block-start: var(--space-xl); padding-block: var(--space-lg); border-block: var(--bw) dashed var(--line-strong); } .p-article__title { color: var(--text-bright); font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: 0; } /* the post's summary, under the title — the same string the index and the meta description carry, so the page states its own subject rather than leaving it to the */ .p-article__summary { max-width: var(--measure); color: var(--text-muted); font-size: var(--text-lg); line-height: var(--lh-cell); } /* an epigraph or byline row inside the frontmatter block */ .p-article__epigraph { display: flex; flex-direction: column; gap: var(--space-xs); max-width: var(--measure); margin: 0; } .p-article__epigraph-text { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--lh-cell); } .p-article__epigraph-cite { color: var(--text-dim); font-size: var(--text-sm); } .p-article__epigraph-src { color: var(--text-bright); } /* ── Body — sections of left-aligned prose under smaller headings ─────────── */ .p-article__body { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; } .p-article__section { display: flex; flex-direction: column; gap: var(--space-lg); } .p-article__heading { color: var(--text-bright); font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); } /* article type scale — the reading size for the prose the renderer emits (c-prose, app/models/post/renderer.rb), so a post's body reads larger than default prose does */ .p-article .c-prose { font-size: var(--text-lg); line-height: var(--lh-cell); } /* a pull-quote inside the running body */ .p-article__quote { display: flex; flex-direction: column; gap: var(--space-xs); max-width: var(--measure); margin: 0; padding-inline-start: var(--space-md); border-inline-start: var(--bw) solid var(--line-strong); } .p-article__quote-text { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--lh-cell); } .p-article__quote-cite { color: var(--text-dim); font-size: var(--text-sm); } .p-article__quote-src { color: var(--text-bright); }