skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): stop why-bento crunching inner mockups on wide viewports

Browse Source 
The full-bleed breakout baked the (100vw - 1500px)/2 gutter into each edge
tile's padding for title alignment. On the leftmost span-4 tile (DESIGN.md)
that gutter grew faster than the column, so past 1500px the inner .why-dm-grid
got squeezed as the viewport widened.

Move the cap to .why-bento itself via margin-inline that only cancels
.site-content's clamp side padding: below 1500px the rail stays edge-to-edge,
at/above 1500px it caps at 1500px and centers with the page background on the
sides. Tile content still aligns with the section headings, and columns stop
growing so the mockups hold their size.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-05-28 16:13:48 -07:00
co-authored by Claude Opus 4.8
parent f6a516940e
commit 506f40607a
1 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/styles/home-kinpaku.css
+14 -15
View File
@@ -1447,27 +1447,26 @@
tile content visually aligns with the section title above. */
.home-kinpaku .why-bento {
margin-top: 36px;
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
/* Break out of .site-content's clamp side padding so the rail's edges align
with its 1500px max-width box. Below 1500px that box IS the full viewport,
so the bento stays edge-to-edge; at/above 1500px it caps at 1500px and
centers, with the page background showing on the sides. The grid then reads
as a contained slab that stops cleanly, rather than gray bleeding to the
screen edges, and its columns stop growing so the mockups never get squeezed. */
margin-inline: calc(-1 * clamp(22px, 4vw, 56px));
}
/* Outer-edge tiles align with .site-content's content edge so tile content
sits at the same x as the section title above. Two-part calc:
1. clamp(22px, 4vw, 56px) — matches .site-content's inner padding when the
viewport is below max-width.
2. max(0px, (100vw - 1500px) / 2) — the extra gutter that opens up once
the viewport exceeds .site-content's 1500px max-width, while the bento
itself stays full-bleed via 100vw breakout.
Pattern is odd = left-edge, even = right-edge across all three rows
(8/4, 4/8, 6/6). */
sits at the same x as the section title above. The breakout gutter
(max(0px, (100vw - 1500px) / 2)) is now absorbed by .why-bento's
padding-inline above, so the edge tiles only need .site-content's own inner
padding here. Pattern is odd = left-edge, even = right-edge across all three
rows (8/4, 4/8, 6/6). */
.home-kinpaku .why-bento .ks-bento-tile:nth-child(odd) {
padding-left: calc(max(0px, (100vw - 1500px) / 2) + clamp(22px, 4vw, 56px));
padding-left: clamp(22px, 4vw, 56px);
}
.home-kinpaku .why-bento .ks-bento-tile:nth-child(even) {
padding-right: calc(max(0px, (100vw - 1500px) / 2) + clamp(22px, 4vw, 56px));
padding-right: clamp(22px, 4vw, 56px);
}
/* Narrow span-4 tiles host visuals that were originally designed for wider