rzen/unique
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

site: back out wide layout — fixed 3/4-column masonry, fixes broken bundle pages

Browse Source 
The width-tier system (full-bleed wide tier, body max-width tweens,
absolute-positioned FLIP masonry) is gone. Grid pages are 4 columns in a
55.5rem container (>=69rem viewport), everything else 3, with the existing
1-2 column steps on small screens. Masonry returns to real flex columns.

This also fixes bundle pages rendering as a diagonal card cascade: the old
.masonry > .masonry-tile { position: absolute } tied with FindCard's scoped
position: relative on specificity, and on bundle pages the FindCard rule won
the cascade order, leaving tiles in normal flow with masonry translate()
offsets stacked on top. Flex columns don't position tiles, so the tie is gone.

Kept from the motion pass: staggered tile reveal on initial load and
"Load more" (now via animation-delay), card hover lifts, button tactility.
This commit is contained in:
rzen
2026-07-12 07:51:14 -04:00
parent 7c86c0f97b
commit 99b55e4e19
3 changed files with 101 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+6 -33
View File
@@ -161,32 +161,14 @@ const year = new Date().getFullYear();
--muted: #6b6b6b;
--accent: #b34700;
--rule: #e0dbd2;
/* Content column width. Reading pages keep this tight ("narrow") for a
comfortable line length; grid/listing pages opt into wider tiers via
<body class="wide"> (BaseLayout `wide` prop). See the tier table below. */
/* Content column width. Reading pages keep this tight for a comfortable
line length; grid/listing pages opt into the wider container via
<body class="wide"> (BaseLayout `wide` prop), which gives the masonry
4 columns instead of 3 (Masonry.astro mirrors the 69rem breakpoint).
55.5rem = 4·225px cards + 3·18px gaps + 2·22.5px body padding. */
--max: 42rem;
}
/* ── Layout width tiers ────────────────────────────────────────────────
Named steps, shared with the masonry column logic (Masonry.astro).
Element rem = 18px (html font-size), so --max in rem renders ×18;
media-query breakpoints use the browser default (1rem = 16px).
tier viewport (mq) chrome (--max) grid card
mobile ≤ 880px 42rem / fluid 1–2 cols fluid
narrow 880–1104px 42rem (756px) 3 cols contained 225px
regular 1104–1376px 55.5rem (999px) 4 cols contained 225px (= narrow)
wide ≥ 1376px 55.5rem (999px) fluid, full-bleed ~288px (≈ old 3-col)
• Chrome (masthead, hero, footer) is capped at the regular 55.5rem in
BOTH regular and wide — it never moves between them. Only the card grid
breaks out to full width in wide (the full-bleed rule is in Masonry.astro).
• regular = 4·225 + 3·gap(18) + 2·pad(22.5) = 999px, so its 4 columns
match narrow's 225px card exactly.
• wide engages ~10% past a 4-col grid of 288px cards
(4·288 + 3·18 + 2·22.5 = 1251px → ×1.10 ≈ 1376px = 86rem), then fills
the full browser width with as many ~288px cards as fit.
Reading pages omit `wide`, so they stay at narrow (42rem) at every size. */
@media (min-width: 69rem) { body.wide { --max: 55.5rem; } } /* regular + wide chrome */
@media (min-width: 69rem) { body.wide { --max: 55.5rem; } }
* { box-sizing: border-box; }
html, body {
margin: 0;
@@ -198,19 +180,10 @@ const year = new Date().getFullYear();
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* Clip at the viewport (not body — the wide grid breaks out past body) so a
card mid-glide from a wider layout never flashes a horizontal scrollbar. */
html { overflow-x: clip; }
body {
max-width: var(--max);
margin: 0 auto;
padding: 1.5rem 1.25rem 2rem;
/* Glide between width tiers instead of snapping — the hero and contained
cards ride inside body, so they gently resize along with the column. */
transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
body { transition: none; }
}
a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }