From 3cefdec56ebc3e5cea17b8f1741f16f843ef6e3c Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Tue, 18 Aug 2026 06:09:03 +0000
Subject: [PATCH] Scrap the right gutter on fluid (multicol) articles

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.
---
 frontend/src/assets/pagerite.css | 41 ++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index 2fb8d8f..8416f4f 100644
--- a/frontend/src/assets/pagerite.css
+++ b/frontend/src/assets/pagerite.css
@@ -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;