LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix multicol layout pinning two fixed columns at narrow widths

Browse Source 
The 78rem minimum on the center track prevented the article from ever
shrinking, locking long articles into two fixed-width columns that
overflowed the window. Drop the floor: the 4fr center share now scales
with the window in both directions, so column widths flex continuously
and the count falls to 1 when space runs out.
This commit is contained in:
LeoVasanko
2026-08-18 05:53:56 +00:00
parent 7ec0d10155
commit 6303d5ae6d
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/pagerite.css
+14 -12
View File
@@ -235,14 +235,15 @@ body {
} }
/* Long articles (.multicol is added by pagerite.js based on content length) /* 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 lift the 78rem cap: the center track takes a 4:1 share of the window
takes a 4:1 share of any extra space against each gutter, so the article against each gutter, growing and shrinking continuously — no minimum,
grows without limit and its column count follows its width (see the so the column count drops to 1 when space gets tight instead of
`columns: 30rem` rule below). The gutters stay symmetric, so the .wide pinning an overflowing fixed width (see the `columns: 30rem` rule
breakout math (50% − 50vw) still centers on the viewport — and at very below). The gutters stay symmetric, so the .wide breakout math
wide windows the gutters still hold the 12rem sidebar. */ (50% − 50vw) still centers on the viewport — and at very wide windows
the gutters still hold the 12rem sidebar. */
body:has(.multicol) #content { body:has(.multicol) #content {
grid-template-columns: minmax(0, 1fr) minmax(78rem, 4fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
} }
body.editing #content { body.editing #content {
@@ -709,12 +710,13 @@ article h2 {
grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr); grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr);
} }
/* Long articles stay uncapped here too: same 12rem reservation for the /* Long articles stay fluid here too: same 12rem reservation for the
sidebar, but the center track keeps growing (see the .multicol rule sidebar, but the center track scales with the window both ways (see
at #content). The article's left edge stays at 12rem either way, so the .multicol rule at #content). The article's left edge stays at
the constant .wide breakout margin below remains correct. */ 12rem either way, so the constant .wide breakout margin below remains
correct. */
body:has(#sidebar):has(.multicol):not(.editing) #content { body:has(#sidebar):has(.multicol):not(.editing) #content {
grid-template-columns: 12rem minmax(78rem, 4fr) minmax(0, 1fr); grid-template-columns: 12rem minmax(0, 4fr) minmax(0, 1fr);
} }
body:has(#sidebar) figure:has(.wide), body:has(#sidebar) figure:has(.wide),