From b4cfe626ffd4f53e44f7d6ac5d144dcac38c4086 Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Tue, 11 Aug 2026 20:32:22 +0500 Subject: [PATCH] =?UTF-8?q?Polish=20Portfolio=20type-board=20captions=20fo?= =?UTF-8?q?r=20font-pair=20preview=20cells=2019=E2=80=9320.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add gallery avatars, tighten the experience index layout, and sync the improved previews gallery replica. Co-authored-by: Cursor --- picker/components/Artboard.astro | 2 + picker/styles/picker.css | 45 ++++++++++- tmp/questionaire/build-gallery-replica.mjs | 75 +++++++++++++++++++ .../previews-gallery-improved.html | 2 +- 4 files changed, 120 insertions(+), 4 deletions(-) diff --git a/picker/components/Artboard.astro b/picker/components/Artboard.astro index 7f05c33ce..f7fcf5276 100644 --- a/picker/components/Artboard.astro +++ b/picker/components/Artboard.astro @@ -259,6 +259,7 @@ const hook = type ? '' : undefined;
+ @@ -458,6 +459,7 @@ const hook = type ? '' : undefined; > {type ? ( + diff --git a/picker/styles/picker.css b/picker/styles/picker.css index c5e9ad9f2..9c2aac227 100644 --- a/picker/styles/picker.css +++ b/picker/styles/picker.css @@ -6849,7 +6849,8 @@ body.picker-page { uppercased, and an instruction a specimen cannot test is decoration. ============================================================ */ .picker-preview-type--experience .ps-desktop { - grid-template-rows: 9.4% minmax(0, 1fr) 8.3%; + /* Footer is hidden on type boards; a third row only buys empty band. */ + grid-template-rows: 9.4% minmax(0, 1fr); } .ps-index { @@ -6861,8 +6862,16 @@ body.picker-page { padding: var(--ps-band-y) var(--ps-gutter); } +.picker-preview-type--experience .ps-index { + gap: var(--ps-gap-sm); +} + .picker-preview-type--experience .ps-index > .pt-headline { - max-width: 20ch; + max-width: none; + font-size: var(--pt-title); + letter-spacing: 0; + white-space: nowrap; + text-wrap: nowrap; } .ps-index-row { @@ -6893,6 +6902,32 @@ body.picker-page { gap: calc(var(--pt-base) * 0.35); } +/* The strategy gallery's Portfolio captions carry a circular avatar above the + title on desktop; the type board repeats that mark so the font-pair preview + reads like cells 19–20 beside it. Handset captions stay text-only. */ +.picker-preview-type--experience .ps-desktop .ps-index-cap { + align-content: start; + gap: calc(var(--pt-base) * 0.42); +} + +.picker-preview-type--experience .ps-index-avatar { + display: none; +} + +.picker-preview-type--experience .ps-desktop .ps-index-avatar { + display: block; + width: calc(var(--pt-base) * 4.8); + margin-bottom: calc(var(--pt-base) * 0.12); + aspect-ratio: 1; + border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral)); + border-radius: 50%; + background: linear-gradient( + 135deg, + color-mix(in oklab, var(--pv-secondary) 24%, var(--pv-neutral)), + color-mix(in oklab, var(--pv-secondary) 46%, var(--pv-neutral)) + ); +} + .ps-index-title { color: var(--pvs-title); font-family: var(--pt-heading); @@ -6962,7 +6997,11 @@ body.picker-page { } .picker-preview-type--experience .ps-index-stop--on { - color: var(--pvs-title); + padding: 0.55em 0.95em; + border-radius: var(--pvs-radius-bar); + background-color: var(--pvs-cta); + color: var(--pv-neutral); + font-weight: 600; } /* The handset drops the title and the rail and shows the work: two plates, diff --git a/tmp/questionaire/build-gallery-replica.mjs b/tmp/questionaire/build-gallery-replica.mjs index 6872d91a5..0184e4f61 100644 --- a/tmp/questionaire/build-gallery-replica.mjs +++ b/tmp/questionaire/build-gallery-replica.mjs @@ -397,6 +397,70 @@ const FONT_PAIR_READ_DOCS_LAYOUT_CSS = [ const FONT_PAIR_READ_SECTION_TITLE_JS = 'doc.querySelectorAll("[data-type-section-title]").forEach(function (el) { if (el.textContent.trim() === "Lorem ipsum dolor sit") el.textContent = "Lorem ipsum dolor"; });'; +const FONT_PAIR_EXPERIENCE_CAP_AVATARS_CSS = [ + '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap {', + ' align-content: start !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-index-avatar {', + ' display: none !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-avatar {', + ' display: block !important;', + ' width: calc(var(--pt-base) * 4.8) !important;', + ' aspect-ratio: 1 !important;', + ' border-radius: 50% !important;', + ' border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral)) !important;', + ' background: linear-gradient(', + ' 135deg,', + ' color-mix(in oklab, var(--pv-secondary) 24%, var(--pv-neutral)),', + ' color-mix(in oklab, var(--pv-secondary) 46%, var(--pv-neutral))', + ' ) !important;', + '}', +].join('\n'); + +const FONT_PAIR_EXPERIENCE_CAP_AVATARS_JS = [ + 'doc.querySelectorAll("#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap").forEach(function (cap) {', + ' if (cap.querySelector(".ps-index-avatar")) return;', + ' var avatar = doc.createElement("i");', + ' avatar.className = "ps-index-avatar";', + ' avatar.setAttribute("aria-hidden", "true");', + ' cap.insertBefore(avatar, cap.firstChild);', + '});', +].join(' '); + +const FONT_PAIR_EXPERIENCE_LAYOUT_CSS = [ + '#picker-form .picker-preview-type--experience .ps-desktop {', + ' grid-template-rows: 9.4% minmax(0, 1fr) !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-index {', + ' gap: var(--ps-gap-sm) !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-index > .pt-headline {', + ' max-width: none !important;', + ' font-size: var(--pt-title) !important;', + ' letter-spacing: 0 !important;', + ' white-space: nowrap !important;', + ' text-wrap: nowrap !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap {', + ' gap: calc(var(--pt-base) * 0.42) !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-avatar {', + ' margin-bottom: calc(var(--pt-base) * 0.12) !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-index-stop--on {', + ' padding: 0.55em 0.95em !important;', + ' border-radius: var(--pvs-radius-bar) !important;', + ' background-color: var(--pvs-cta) !important;', + ' color: var(--pv-neutral) !important;', + ' font-weight: 600 !important;', + '}', + '#picker-form .picker-preview-type--experience .ps-footer,', + '#picker-form .picker-preview-type--experience .ps-phone-footer {', + ' display: none !important;', + '}', +].join('\n'); + /** @type {{ id: string, cells: string[], css: string }[]} */ const EXPERIMENTS = [ { @@ -454,6 +518,17 @@ const EXPERIMENTS = [ css: FONT_PAIR_READ_DOCS_LAYOUT_CSS, js: FONT_PAIR_READ_SECTION_TITLE_JS, }, + { + id: 'font-pair-experience-cap-avatars', + cells: ['font-pair--experience--default'], + css: FONT_PAIR_EXPERIENCE_CAP_AVATARS_CSS, + js: FONT_PAIR_EXPERIENCE_CAP_AVATARS_JS, + }, + { + id: 'font-pair-experience-layout', + cells: ['font-pair--experience--default'], + css: FONT_PAIR_EXPERIENCE_LAYOUT_CSS, + }, { id: 'font-pair-operate-ops-chrome', cells: ['font-pair--operate--default'], diff --git a/tmp/questionaire/previews-gallery-improved.html b/tmp/questionaire/previews-gallery-improved.html index 615b3bdaf..a29bf0751 100644 --- a/tmp/questionaire/previews-gallery-improved.html +++ b/tmp/questionaire/previews-gallery-improved.html @@ -935,7 +935,7 @@ Array.prototype.forEach.call(document.querySelectorAll('.scaler'), function (sca