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

Polish Portfolio type-board captions for font-pair preview cells 19–20.

Browse Source 
Add gallery avatars, tighten the experience index layout, and sync the improved previews gallery replica.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-09-01 10:02:40 +05:00
co-authored by Cursor
parent a975a8bcc1
commit b4cfe626ff
4 changed files with 120 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
picker/components/Artboard.astro
+2
View File
@@ -259,6 +259,7 @@ const hook = type ? '' : undefined;
<div class:list={['ps-index-row', n === 1 && 'ps-index-row--flip']}>
<div class="ps-image"></div>
<div class="ps-index-cap">
<i class="ps-index-avatar" aria-hidden="true"></i>
<strong class="ps-index-title" data-type-gallery-title></strong>
<span class="ps-index-meta" data-type-gallery-meta></span>
<span class="ps-index-note" data-type-caption></span>
@@ -458,6 +459,7 @@ const hook = type ? '' : undefined;
>
{type ? (
<Fragment>
<i class="ps-index-avatar" aria-hidden="true"></i>
<strong class="ps-index-title" data-type-gallery-title></strong>
<span class="ps-index-meta" data-type-gallery-meta></span>
<span class="ps-index-note" data-type-caption></span>
picker/styles/picker.css
+42 -3
View File
@@ -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,
tmp/questionaire/build-gallery-replica.mjs
+75
View File
@@ -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'],
tmp/questionaire/previews-gallery-improved.html
+1 -1
View File
File diff suppressed because one or more lines are too long