diff --git a/README.md b/README.md index 902b917..617a774 100644 --- a/README.md +++ b/README.md @@ -137,9 +137,10 @@ step turns over exactly when the panel pins. A step's title is a button that scr The panel is tied to the text, not to the pinned frame: it is positioned against `.how__text-inner`, so it starts at the title and its width is stated as 200% of the text column -(4 of 12 against 8 of 12). Its height is measured once by script as the collapsed list plus the -tallest step's text, so it never resizes as steps change while each step's text still takes only -the room it needs. Without script the first step stays open, the panel takes the text's own +(4 of 12 against 8 of 12). That block is held at one height, measured once by script as the +collapsed list plus the tallest step's text, and centred in the pinned frame. So the title, the +list and the panel all sit in the middle of the dark area and none of them move as the steps +change, while each step's text still takes only the room it needs. Without script the first step stays open, the panel takes the text's own height, and the section reads as a plain sequence. Phones get that plain sequence in any case: every step open, the upright drawing under its text. This goes beyond the home page's single load moment on purpose, at the client's request; the home page is diff --git a/package-lock.json b/package-lock.json index a41a19d..4e064f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -699,7 +699,6 @@ "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@emnapi/wasi-threads": "1.2.3", "tslib": "^2.4.0" @@ -711,7 +710,6 @@ "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -2097,7 +2095,6 @@ "integrity": "sha512-TXyindR+lBr22aJIdMQzCFHPHR6cR4js838mRDCSz5hOKWZvZwsXSSiXDmjRj4iJmgl+sR9O+1mkoVBSMadNug==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.18.0" } @@ -2235,7 +2232,6 @@ "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -2868,7 +2864,6 @@ "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==", "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -3917,7 +3912,6 @@ "integrity": "sha512-WRFq3Wn3WId7LLROfMLdH7xaFr2jR62wU8nLO6rQUOLOxNZUviyJQs1M0iIhLexSFy+L+w0ch66wtoO2jRjG0A==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -4394,7 +4388,6 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -4686,7 +4679,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz", "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==", "license": "MIT", - "peer": true, "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", @@ -5119,7 +5111,6 @@ "integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==", "devOptional": true, "license": "ISC", - "peer": true, "bin": { "yaml": "bin.mjs" }, diff --git a/scripts/panel-align-test.mjs b/scripts/panel-align-test.mjs index 528eb87..edb3e85 100644 --- a/scripts/panel-align-test.mjs +++ b/scripts/panel-align-test.mjs @@ -29,6 +29,8 @@ for (let i = 0; i < count; i++) { bottomVsList: Math.round(fig.bottom - last.bottom), rightVsEdge: Math.round(fig.right - rightEdge), listFits: Math.round(sticky.bottom - last.bottom), + spaceAbove: Math.round(fig.top - sticky.top), + spaceBelow: Math.round(sticky.bottom - fig.bottom), }; })); await page.screenshot({ path: `${prefix}-${i}.png` }); diff --git a/src/components/verifier/HowItWorks.astro b/src/components/verifier/HowItWorks.astro index 0a00188..f969322 100644 --- a/src/components/verifier/HowItWorks.astro +++ b/src/components/verifier/HowItWorks.astro @@ -107,9 +107,17 @@ const groups = v.groups.map((g, i) => ({ title: g.title, body: g.body, desc: g.d height: 100%; padding-block: var(--how-inset); } - .how__text { grid-column: 1; } - /* The box on the right is tied to this, so it ends where the text ends. */ - .how__text-inner { position: relative; } + .how__text { + grid-column: 1; + display: grid; + align-content: center; + } + /* The box on the right is tied to this, so it ends where the text ends. Holding it at the + height of the longest step keeps both of them still as the steps change. */ + .how__text-inner { + position: relative; + min-height: var(--how-text-h, auto); + } .how__title { max-width: 14em; } .how__steps { margin-top: clamp(1.5rem, 9vh, 5rem); } .how__step { @@ -225,6 +233,8 @@ const groups = v.groups.map((g, i) => ({ title: g.title, body: g.body, desc: g.d const activeIndex = () => steps.findIndex((step) => step.hasAttribute('data-active')); const measure = () => { if (!textInner) return; + /* Let it fall back to its natural height first, or it would measure its own floor. */ + root.style.removeProperty('--how-text-h'); const open = inners[activeIndex()]?.offsetHeight ?? 0; const base = textInner.offsetHeight - open; const tallest = inners.reduce((max, el) => Math.max(max, el.offsetHeight), 0);