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

Scrap the right gutter on fluid (multicol) articles

Browse Source 
Long articles now span from the left gutter (which holds the overlaying
sidebar) to the right viewport edge instead of reserving a symmetric
right gutter. The .wide breakout is re-anchored accordingly: left margin
is the gutter share (20vw of the 1fr+4fr grid, 1/5 of the post-editor
width while editing) plus main's padding; the <=102rem sidebar case keeps
its constant -13.25rem margin.
This commit is contained in:
LeoVasanko
2026-08-18 06:09:03 +00:00
parent e044ab86ee
commit 3cefdec56e
1 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/pagerite.css
+28 -13
View File
@@ -235,15 +235,13 @@ body {
}
/* Long articles (.multicol is added by pagerite.js based on content length)
lift the 78rem cap: the center track takes a 4:1 share of the window
against each gutter, growing and shrinking continuously — no minimum,
so the column count drops to 1 when space gets tight instead of
pinning an overflowing fixed 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. */
lift the 78rem cap and scrap the right gutter: a 1fr left gutter (which
holds the overlaying sidebar) and the article taking all the rest, out
to the right viewport edge. The column count follows the width (see the
`columns: 30rem` rule below). The .wide breakout is re-anchored to the
left gutter below (the article is no longer viewport-centered). */
body:has(.multicol) #content {
grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}
body.editing #content {
@@ -711,12 +709,11 @@ article h2 {
}
/* Long articles stay fluid here too: same 12rem reservation for the
sidebar, but the center track scales with the window both ways (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. */
sidebar, then the article takes everything to the right viewport
edge. 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(0, 4fr) minmax(0, 1fr);
grid-template-columns: 12rem minmax(0, 1fr);
}
body:has(#sidebar) figure:has(.wide),
@@ -725,6 +722,16 @@ article h2 {
}
}
/* .wide on multicol pages: the article is not viewport-centered (no right
gutter), so the bleed anchors at the left gutter — the 1fr share of the
1fr + 4fr grid, i.e. 20vw — plus main's padding, and spans on to the
right viewport edge. Loses to the sidebar rule above (id in :has) and to
the editing rules below (same specificity, later in the file). */
body:has(.multicol) figure:has(.wide),
body:has(.multicol) img.wide:not(figure img) {
margin-inline: calc(-20vw - 1.25rem) 0;
}
/* Editing: shrink the bleed to the space right of the docked editor. */
body.editing figure:has(.wide),
body.editing img.wide:not(figure img) {
@@ -732,6 +739,14 @@ body.editing img.wide:not(figure img) {
margin-inline: calc(50% - (100vw - var(--editor-w)) / 2);
}
/* Editing + multicol: the left gutter is 1/5 of the space right of the
editor. */
body.editing:has(.multicol) figure:has(.wide),
body.editing:has(.multicol) img.wide:not(figure img) {
width: calc(100vw - var(--editor-w));
margin-inline: calc((100vw - var(--editor-w)) / -5 - 1.25rem) 0;
}
/* Scroll reveal (pagerite.js adds .reveal/.in; JS off = fully visible) */
.reveal {
opacity: 0;