/* 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 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. The article overrides the object's fixed 12rem rail: the body column is sized to the reading measure and the rail takes everything the container has left, rather than the body column keeping slack it cannot use. --measure is in ch and the body sets it at --text-lg, so the column that holds it is that many cells scaled by --text-lg's 1.15 — the same monospace family sizes both, so the ratio holds. Below the container's full width the body column shrinks first and the rail falls back to its 12rem minimum. Everything in the body — prose, figures, tables — is bounded by that column now; wide blocks scroll within it rather than flowing out over the right gutter. */ @media (min-width: 56rem) { .p-article .o-split--docs { grid-template-columns: minmax(12rem, 1fr) minmax(0, calc(var(--measure) * 1.15)); } } /* ── 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); } /* a post's body is one section, so its flex gap is all that separates a section heading from the prose above it as well as below. A heading with something before it takes an extra gap's worth on top, so it reads as starting a section rather than as another line of the one before: twice the space above that it has below. */ .p-article__body * + .p-article__heading { margin-block-start: var(--space-lg); } /* 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); /* extra breathing room above and below the quote, added to the section's flex gap so a pull-quote sits apart from the prose it interrupts on both mobile and desktop */ margin-block: var(--space-sm); margin-inline: 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); }