From 2f491f54c3624376a24856411587e78ff1939208 Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Sun, 26 Jul 2026 13:24:35 +0500 Subject: [PATCH] update --- picker/pages/index.astro | 2 +- picker/styles/screens/layout.css | 67 +++++++++++++++++++++++++------- 2 files changed, 55 insertions(+), 14 deletions(-) diff --git a/picker/pages/index.astro b/picker/pages/index.astro index 4564f0c78..bb0bdd803 100644 --- a/picker/pages/index.astro +++ b/picker/pages/index.astro @@ -49,7 +49,7 @@ const questions = [ step: 'Motion', slug: 'motion', name: 'motion-energy', - title: 'How much movement should this design have?', + title: 'How much movement should it have?', legend: 'Motion energy', cta: 'Select motion energy', previewClass: 'picker-preview-motion', diff --git a/picker/styles/screens/layout.css b/picker/styles/screens/layout.css index 3712cc827..43d84904a 100644 --- a/picker/styles/screens/layout.css +++ b/picker/styles/screens/layout.css @@ -31,7 +31,11 @@ content box is the page width, so spans hold there; the gallery sits inside one editorial track, so its gutter is scaled by that track's share. The ladder runs to ten because the widest gallery track is a ten-column one, - and each answer's gallery gutter is derived from the number here. */ + and each answer's gallery gutter is derived from the number here. + + These are the numbers for a page that takes the whole field. Editorial + takes eleven of the field's twelve columns and re-fits the same ladder to + its own width, in its own block below. */ [data-carry] { --pvs-gut: 1.6%; --pvs-w1: 6.8667%; @@ -79,24 +83,35 @@ Mixed from the artboard's own ink so the field survives a drenched ground, and kept under the page so nothing is read through it. */ + +/* The field is nailed to six and six and carries its own twelve columns + rather than reading the answer's margins and the ladder above. A measure + that re-fits itself to whatever page is on it is not a measure: the origin + and the column width would both follow the answer, and four pages each + checked against a ruler cut to fit would be four pages checked against + nothing. The instrument is the same one under all four. What moves is the + page standing on it, which is the whole of what this screen is asking. */ .picker-preview-layout .ps-desktop { position: relative; isolation: isolate; } .picker-preview-layout .ps-desktop::before { - --pvs-mark: calc(var(--pvs-w1) + var(--pvs-gut) / 2); + --pvs-field-col: 6.8667%; + --pvs-field-gut: 1.6%; + --pvs-mark: calc(var(--pvs-field-col) + var(--pvs-field-gut) / 2); content: ""; position: absolute; z-index: -1; - inset: 0 var(--pvs-gutter-end) 0 var(--pvs-gutter); + inset: 0 6%; background-image: repeating-linear-gradient( to right, transparent 0 calc(var(--pvs-mark) - 0.5px), color-mix(in oklab, var(--pvs-ink) 17%, transparent) calc(var(--pvs-mark) - 0.5px) calc(var(--pvs-mark) + 0.5px), - transparent calc(var(--pvs-mark) + 0.5px) calc(var(--pvs-w1) + var(--pvs-gut)) + transparent calc(var(--pvs-mark) + 0.5px) + calc(var(--pvs-field-col) + var(--pvs-field-gut)) ); pointer-events: none; } @@ -167,22 +182,46 @@ } /* ── Editorial ─────────────────────────────────────────────── - Uneven margins, a standing text column at seven against a portrait at five, - a single column of section copy beside a ten-column gallery, and a hero + 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 band that takes most of the page. Still every edge on a line: this is the grid used with nerve, not abandoned. Copy hangs from the top of each band - the way a column of text hangs from a rule. */ + the way a column of text hangs from a rule. + + The wide left margin is a whole column of the field rather than a round + number of its own: the page starts where the second column starts and ends + where the field ends, so it keeps eleven of the twelve. An answer is + allowed to spend fewer columns than the page has. It is not allowed to + spend them at a size the measure does not recognise, which is what a + margin picked for its look does. */ #picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout, :where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="editorial"]:checked)) [data-carry] { - --pvs-gutter: 11%; - --pvs-gutter-end: 4%; + --pvs-gutter: 13.4507%; + --pvs-gutter-end: 6%; + /* The ladder above, re-fitted. A column and a gutter are the same number of + pixels here as under the other three answers and a larger share of a page + one column narrower, so every span still stops on a drawn line. The + answer is written the way it was: --pvs-w7 against the rest is still a + seven, now a seven of eleven. */ + --pvs-gut: 1.748%; + --pvs-w1: 7.5018%; + --pvs-w2: 16.7516%; + --pvs-w3: 26.0015%; + --pvs-w4: 35.2513%; + --pvs-w5: 44.5011%; + --pvs-w6: 53.7509%; + --pvs-w7: 63.0007%; + --pvs-w8: 72.2505%; + --pvs-w9: 81.5004%; + --pvs-w10: 90.7502%; --pvs-hero-cols: var(--pvs-w7) minmax(0, 1fr); --pvs-hero-gap: var(--pvs-gut); --pvs-editorial-cols: var(--pvs-w2) minmax(0, 1fr); --pvs-editorial-gap: var(--pvs-gut); - /* A lead card at four columns against three of two, in a ten-column track. */ - --pvs-gallery-cols: 32.2667fr 15.3333fr 15.3333fr 15.3333fr; - --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 83.0667); + /* A lead card at three columns against three of two, in a nine-column + track. */ + --pvs-gallery-cols: 26.0015fr 16.7516fr 16.7516fr 16.7516fr; + --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 81.5004); --pvs-section-align: start; --pvs-rows: 8% 57.5% 8.5% 18.5% 7.5%; --pvs-phone-gutter: 11%; @@ -193,7 +232,9 @@ /* ── Freeform ──────────────────────────────────────────────── Columns of no particular relation, and blocks that leave the field. The - escapes are listed under the drift flag below. */ + margins are the first thing off it: the page hangs past the measure on the + left and stops short of it on the right, before a single block has moved. + The escapes are listed under the drift flag below. */ #picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout, :where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-carry] { --pvs-gutter: 3.5%;