`, and `blog-sidebar-template.html`'s `

`), running the sidebar and article flush against the viewport edge. `padding-block` only ever touches top/bottom, so it can't touch `.wrap`'s left/right padding at all. */ .docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-block: 48px 96px; } .docs-side { border-right: 1px solid var(--border); padding-right: 24px; } .docs-side .group { margin-bottom: 28px; } .docs-side .group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 12px; font-family: var(--font-body); font-weight: 500; } .docs-side a { display: block; font-size: 13.5px; color: var(--muted); padding: 5px 0; } .docs-side a:hover, .docs-side a[aria-current="page"] { color: var(--fg); } .docs-main h1 { font-size: 34px; margin-bottom: 14px; } .docs-main .lede { font-size: 16px; margin-bottom: 32px; max-width: 60ch; } .docs-main pre { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; overflow-x: auto; font: 13px/1.6 var(--font-mono); color: var(--fg); } .docs-main h2 { font-size: 20px; margin: 40px 0 14px; } .docs-main p { font-size: 15px; margin-bottom: 14px; max-width: 60ch; } /* ---------- changelog ---------- */ .changelog-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; } .changelog-entry { display: grid; grid-template-columns: 140px 1fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--border); } .changelog-entry time { font: 13px/1 var(--font-mono); color: var(--muted); padding-top: 4px; } .changelog-entry h3 { font-size: 19px; margin-bottom: 10px; } .changelog-entry p { font-size: 14.5px; margin-bottom: 12px; max-width: 56ch; } .changelog-entry .tag { display: inline-block; font: 11px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 4px 8px; border-radius: 6px; margin-bottom: 12px; } /* ---------- blog ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .post-card { border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; min-height: 0; min-width: 0; } .post-card.featured { grid-column: span 3; flex-direction: row; align-items: stretch; gap: 32px; padding: 28px; } .post-card.featured .post-card-media { flex: 0 0 42%; margin-bottom: 0; aspect-ratio: 16/11; } .post-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; } .post-card-media { aspect-ratio: 16/10; margin-bottom: 16px; font-size: 12px; border-radius: 10px; } .post-card .tag { display: inline-block; align-self: flex-start; font: 11px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); background: color-mix(in oklch, var(--accent) 10%, transparent); padding: 4px 8px; border-radius: 6px; margin-bottom: 12px; } .post-card h2, .post-card h3 { font-weight: 500; letter-spacing: -0.01em; margin-bottom: 10px; } .post-card h2 { font-size: 22px; } .post-card h3 { font-size: 17px; } .post-card p { font-size: 14px; margin-bottom: 16px; flex: 1; } .post-meta { font: 12.5px/1 var(--font-mono); color: var(--muted); display: flex; gap: 8px; margin-top: auto; } /* ---------- blog post (single-post template) ---------- */ .post-detail { max-width: 720px; margin: 0 auto; padding-block: 72px 96px; } .post-detail-header { margin-bottom: 40px; } .post-detail-header h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px; } .post-detail-header .post-meta { font-size: 13px; } .post-detail-body { font-size: 17px; line-height: 1.7; max-width: 66ch; } .post-detail-body h2 { font-size: 26px; margin: 40px 0 16px; letter-spacing: -0.01em; } .post-detail-body h3 { font-size: 20px; margin: 32px 0 12px; letter-spacing: -0.01em; } .post-detail-body p { margin-bottom: 18px; } .post-detail-body ul, .post-detail-body ol { margin: 0 0 18px 22px; } .post-detail-body li { margin-bottom: 6px; } .post-detail-body blockquote { border-left: 2px solid var(--border-strong); padding-left: 20px; margin: 24px 0; color: var(--muted); font-style: italic; } .post-detail-body code { font: 13px/1 var(--font-mono); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; } .post-detail-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 20px 0; } .post-detail-body pre code { border: none; background: none; padding: 0; } /* `height: auto` added (2026-08-12, same dispatch as the admin editor's `.editor-body .tiptap img` fix) — confirmed live (headless Chromium against this exact stylesheet, a real PNG carrying `width`/`height` HTML attributes) that WITHOUT it, an image squashes instead of scaling: `max-width: 100%` alone shrinks the rendered width, but the HTML `height` attribute `render.ts` emits (from stored media metadata) still wins as a presentational hint and pins the pixel height, distorting the aspect ratio. `renderImageTag` (`src/server/http/site/ render.ts`) emits `width`/`height` independently whenever an asset has that metadata stored — this is a real, reachable shape, not a hypothetical one. This same rule, byte-identical, is copied (not inherited — ADR/decision: Tovu themes are copies, see `project_tovu_theme_copy_ model`) into 5 other themes; all 6 got this same one-line fix in this dispatch. */ .post-detail-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 20px 0; } /* Highlight mark (`renderDocNode`'s `"highlight"` case, 2026-08-11) — the browser's own UA default for `` (yellow background, black text) is legible on its own, but a bare square block reads out of place next to every other inline element here that already carries this theme's own rounding (`code` two lines up, `img` just above). An explicit `background`/`color` here also stops an author-supplied `background-color` inline style (`safeCssColor`, render.ts) from ever landing on illegible black-on-black — the inline style, when present, still wins over this class rule (equal-ish specificity but source order + `style=""` beats a stylesheet class), this is only the fallback for the toolbar's plain, colorless toggle. */ .post-detail-body mark { background: #fef08a; color: #422006; border-radius: 3px; padding: 0 3px; } /* Table (`renderDocNode`'s `"table"`/`"tableRow"`/`"tableCell"`/`"tableHeader"` cases, 2026-08-11) — an unstyled `` has no visible cell boundaries at all, which is what "renders as unstyled garbage publicly" (the brief's own phrase for structural nodes) looks like in practice: `border- collapse` alone leaves every cell edge invisible until a border is declared explicitly. `overflow- x: auto` on the wrapper block handles a table wider than the reading column (66ch, `.post-detail- body`'s own max-width above) without it blowing out the page's horizontal scroll. */ .post-detail-body table { width: 100%; border-collapse: collapse; margin: 24px 0; display: block; overflow-x: auto; } .post-detail-body th, .post-detail-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; } .post-detail-body th { background: var(--surface); font-weight: 600; } /* Task list (`renderDocNode`'s `"taskList"`/`"taskItem"` cases, 2026-08-11) — without this, `ul[data-type="taskList"]` inherits the plain `ul, ol` bullet-indent rule two lines above (a redundant bullet glyph next to the checkbox) and the checkbox/label/content sit on three stacked lines instead of one row, since `

` has no layout of its own beyond the UA default. `list-style: none` + `padding-left: 0` removes the bullet; the flex row aligns the (disabled, public-render-only — see that case's own comment) checkbox with the first line of text rather than the block's own vertical center. */ .post-detail-body ul[data-type="taskList"] { list-style: none; padding-left: 0; margin: 0 0 18px; } .post-detail-body li[data-type="taskItem"] { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; } .post-detail-body li[data-type="taskItem"] > label { display: flex; align-items: center; margin-top: 0.35em; } .post-detail-body li[data-type="taskItem"] > div { flex: 1 1 auto; } .post-detail-body li[data-type="taskItem"] > div p { margin-bottom: 0; } /* YouTube embed (`renderDocNode`'s `"youtube"` case, 2026-08-11) — a responsive 16:9 box regardless of whatever width/height the editor's own node carried (the renderer ignores those attrs entirely, see that case's own comment for why); without this an unstyled `