From 29598150b475223f0f127f8205d0dfec96e1a2a4 Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Sun, 26 Jul 2026 23:04:46 +0500 Subject: [PATCH] update --- picker/styles/screens/layout.css | 71 ++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/picker/styles/screens/layout.css b/picker/styles/screens/layout.css index 04acf108f..3e2a62700 100644 --- a/picker/styles/screens/layout.css +++ b/picker/styles/screens/layout.css @@ -179,6 +179,77 @@ --pvs-phone-gallery-cols: 1.35fr 0.85fr; } +/* Balanced needs no block of its own on this screen. The shared artboard is + already an asymmetrically balanced page: margins of 5.5 and 3.2, a hero that + splits 35.8 against the rest across a wide gap, and a lead card carrying more + than the three beside it. Unequal parts that settle on a centered axis is + what balance means, so the default is the answer and Simple grid is the one + that has to be talked out of it, below. */ + +/* Simple grid, on this screen's own preview. The regular one: equal margins, + whole-column spans, four identical cards, and a single gutter used as every + gap down the page, so one rhythm runs from the nav to the footer. Every block + hangs from the top of its band rather than floating in the middle of it. + Nothing added, only proportions evened out. */ +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout { + --pvs-gutter: 6%; + --pvs-gutter-end: 6%; + /* Equal halves. Any split with a dominant mass is asymmetrical balance, + which is the other answer. The copy's own bars are capped below so the + half does not read as a half-page smear of text. */ + --pvs-hero-cols: var(--pvs-w6) minmax(0, 1fr); + --pvs-hero-gap: var(--pvs-gut); + /* The section copy is removed below, so the card row takes the whole band: + four cards of exactly three columns, sitting directly under the proof + band's four three-column claims. Two rows of the same four cells is what + a simple grid looks like. */ + --pvs-editorial-cols: minmax(0, 1fr); + --pvs-editorial-gap: 0%; + --pvs-gallery-cols: repeat(4, minmax(0, 1fr)); + --pvs-gallery-gap: var(--pvs-gut); + --pvs-section-align: start; + --pvs-rows: 9.4% 45.5% 9% 27.8% 8.3%; + --pvs-phone-gutter: 6%; + --pvs-phone-gallery-cols: 1fr 1fr; +} + +/* The one block that leaves: the section copy beside the cards. A text column + against a card row is a two-weight composition, and this answer is the one + without a second weight. Desktop only; the handset stack is sized in pixels + and closes the gap itself. */ +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-desktop .ps-editorial-copy, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-desktop .ps-editorial-copy { + display: none; +} + +/* The bars keep a text measure instead of running to the column edge, so the + copy reads as a compact block in its half rather than a wide one. */ +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-headline i, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-headline i { + width: 76%; +} + +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-headline i:last-child, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-headline i:last-child { + width: 54%; +} + +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-copy i, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-copy i { + width: 58%; +} + +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-copy i:last-child, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-copy i:last-child { + width: 44%; +} + +#picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="simple-grid"]) .picker-preview-layout .ps-hero-copy .ps-eyebrow, +:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"]))):has(input[name="layout-structure"][value="simple-grid"]:checked) .picker-preview-layout .ps-hero-copy .ps-eyebrow { + width: 38%; +} + /* ── Editorial ─────────────────────────────────────────────── Uneven margins, a standing text column at seven against a portrait at four, a single column of section copy beside a nine-column gallery, and a hero