diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css index 19a46f1..76800ac 100644 --- a/frontend/src/assets/pagerite.css +++ b/frontend/src/assets/pagerite.css @@ -228,6 +228,17 @@ body { transition: margin-left 0.25s ease; } +/* Long articles (.multicol is added by pagerite.js based on content length) + lift the 78rem cap: the center track keeps 78rem as its minimum and then + takes a 4:1 share of any extra space against each gutter, so the article + grows without limit and its column count follows its width (see the + `columns: 30rem` rule below). The gutters stay symmetric, so the .wide + breakout math (50% − 50vw) still centers on the viewport — and at very + wide windows the gutters still hold the 12rem sidebar. */ +body:has(.multicol) #content { + grid-template-columns: minmax(0, 1fr) minmax(78rem, 4fr) minmax(0, 1fr); +} + body.editing #content { margin-left: var(--editor-w); padding-left: 1rem; @@ -464,17 +475,17 @@ article dd { hyphens: auto; } -/* Multi-column reading on wide displays, but only for long articles - (pagerite.js adds .multicol based on content length and splits the body - into .colseg segments separated by full-width h2s and wide figures; - only segments with enough text get .cols and thus columns). Columns only - reflow text inside the article; the article's width never changes. */ -@media (min-width: 100rem) { - .multicol .colseg.cols { - columns: 2; - column-gap: 3.5rem; - column-rule: 1px solid var(--line); - } +/* Multi-column reading, but only for long articles (pagerite.js adds + .multicol based on content length and splits the body into .colseg segments + separated by full-width h2s and wide figures; only segments with enough + text get .cols). No fixed breakpoint: `columns: 30rem` lets CSS fit as + many columns of at least 30rem as the article's current width allows — + since .multicol also uncaps the article width (see #content above), a + wider window simply yields more columns. */ +.multicol .colseg.cols { + columns: 30rem; + column-gap: 3.5rem; + column-rule: 1px solid var(--line); } .multicol .colseg { @@ -664,7 +675,7 @@ figure:has(.wide) img { /* Floats take a fixed share of the text column rather than sizing by the image's intrinsic width, which varies wildly (SVGs have none, and min-content collapses them). A percentage also scales correctly inside - two-column segments, where the column is the containing block. The + multi-column segments, where the column is the containing block. The caption wraps within that width. A width attribute ({.right width=300}) overrides the default on uncaptioned images. */ figure:has(.right), @@ -692,6 +703,14 @@ article h2 { grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr); } + /* Long articles stay uncapped here too: same 12rem reservation for the + sidebar, but the center track keeps growing (see the .multicol rule + at #content). The article's left edge stays at 12rem either way, so + the constant .wide breakout margin below remains correct. */ + body:has(#sidebar):has(.multicol):not(.editing) #content { + grid-template-columns: 12rem minmax(78rem, 4fr) minmax(0, 1fr); + } + body:has(#sidebar) figure:has(.wide), body:has(#sidebar) img.wide:not(figure img) { margin-inline: -13.25rem 0; diff --git a/frontend/src/pagerite.js b/frontend/src/pagerite.js index 1f1c7bb..fcd2530 100644 --- a/frontend/src/pagerite.js +++ b/frontend/src/pagerite.js @@ -232,7 +232,7 @@ import { showAuthIframe } from 'paskia' renderAuthUi(); placeEditPen(); // Multi-column layout only when there is enough text to justify it. - // Split the body into columned segments: h2s and wide figures are + // Split the body into columned segments: h1s, h2s and wide figures are // full-width separators and never go inside columns. const article = main.querySelector("article"); if (article) { @@ -243,9 +243,11 @@ import { showAuthIframe } from 'paskia' ); if (body && article.classList.contains("multicol") && !body.querySelector(".colseg")) { - // h2s and anything holding a wide image are full-width separators + // h1s, h2s and anything holding a wide image are full-width + // separators const isSeparator = (el) => - el.tagName === "H2" || el.querySelector("img.wide") !== null; + el.tagName === "H1" || el.tagName === "H2" + || el.querySelector("img.wide") !== null; let seg = null; for (const el of [...body.children]) { if (isSeparator(el)) {