From 470b655096e5b8a30001b5b28d4967b96a8d941c Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Tue, 11 Aug 2026 17:36:14 +0500 Subject: [PATCH] Number questionnaire preview gallery cells 1 through 75. Add sequential labels to figcaptions and iframe titles in the gallery builder, then regenerate baseline and improved HTML. Co-authored-by: Cursor --- tmp/questionaire/build-gallery.mjs | 16 +- .../previews-gallery-improved.html | 454 +++++++++--------- tmp/questionaire/previews-gallery.html | 454 +++++++++--------- 3 files changed, 467 insertions(+), 457 deletions(-) diff --git a/tmp/questionaire/build-gallery.mjs b/tmp/questionaire/build-gallery.mjs index fb4f97816..adfd35dcf 100644 --- a/tmp/questionaire/build-gallery.mjs +++ b/tmp/questionaire/build-gallery.mjs @@ -408,6 +408,8 @@ const HOST_CSS = [ ' gap: 36px 28px; }', 'figure.cell { margin: 0; min-width: 0; }', 'figure.cell figcaption { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; opacity: .85; }', + 'figure.cell figcaption .cell-num { display: inline-block; min-width: 2.2em; margin-right: 4px;', + ' font-variant-numeric: tabular-nums; font-weight: 600; color: #c8b57c; opacity: 1; }', 'figure.cell .scaler { position: relative; width: 100%; }', 'figure.cell .clip { overflow: hidden; position: absolute; top: 0; left: 0; transform-origin: top left; }', 'figure.cell iframe { display: block; border: 0; background: transparent; position: absolute; top: 0; left: 0; }', @@ -451,7 +453,11 @@ async function main() { }; } - const cells = CELL_LIST.map((cell) => ({ ...cell, externalHtml: externalInputs(cell) })); + const cells = CELL_LIST.map((cell, index) => ({ + ...cell, + number: index + 1, + externalHtml: externalInputs(cell), + })); const payload = { viewport: capture.viewport, @@ -497,12 +503,12 @@ async function main() { const sectionsHtml = SECTIONS.map((section) => { const dims = capture.sections[section.id].dims; const cellsHtml = cells.filter((cell) => cell.section === section.id).map((cell) => [ - '
', - '
' + cell.caption + '
', + '
', + '
' + cell.number + ' ' + cell.caption + '
', '
', '
', - '', '
', '
', diff --git a/tmp/questionaire/previews-gallery-improved.html b/tmp/questionaire/previews-gallery-improved.html index 52bf5a89a..af2f70221 100644 --- a/tmp/questionaire/previews-gallery-improved.html +++ b/tmp/questionaire/previews-gallery-improved.html @@ -26,6 +26,8 @@ h2 { font-size: 15px; font-weight: 600; margin: 44px 0 14px; color: #efe9da; } gap: 36px 28px; } figure.cell { margin: 0; min-width: 0; } figure.cell figcaption { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; opacity: .85; } +figure.cell figcaption .cell-num { display: inline-block; min-width: 2.2em; margin-right: 4px; + font-variant-numeric: tabular-nums; font-weight: 600; color: #c8b57c; opacity: 1; } figure.cell .scaler { position: relative; width: 100%; } figure.cell .clip { overflow: hidden; position: absolute; top: 0; left: 0; transform-origin: top left; } figure.cell iframe { display: block; border: 0; background: transparent; position: absolute; top: 0; left: 0; } @@ -66,35 +68,35 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Surfaces (screen 01b)

-
-
Selected: Landing page
+
+
1 Selected: Landing page
- +
-
-
Selected: App UI
+
+
2 Selected: App UI
- +
-
-
Selected: Docs
+
+
3 Selected: Docs
- +
-
-
Selected: Portfolio
+
+
4 Selected: Portfolio
- +
@@ -103,35 +105,35 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Color palette (screen 02)

-
-
Selected: Landing page + Palette preview
+
+
5 Selected: Landing page + Palette preview
- +
-
-
Selected: App UI + Palette preview
+
+
6 Selected: App UI + Palette preview
- +
-
-
Selected: Docs + Palette preview
+
+
7 Selected: Docs + Palette preview
- +
-
-
Selected: Portfolio + Palette preview
+
+
8 Selected: Portfolio + Palette preview
- +
@@ -140,107 +142,107 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Color strategy (screen 03)

-
-
Selected: Landing page + Restrained
+
+
9 Selected: Landing page + Restrained
- +
-
-
Selected: Landing page + Committed
+
+
10 Selected: Landing page + Committed
- +
-
-
Selected: Landing page + Full palette
+
+
11 Selected: Landing page + Full palette
- +
-
-
Selected: Landing page + Drenched
+
+
12 Selected: Landing page + Drenched
- +
-
-
Selected: App UI + Restrained
+
+
13 Selected: App UI + Restrained
- +
-
-
Selected: App UI + Committed
+
+
14 Selected: App UI + Committed
- +
-
-
Selected: App UI + Full palette
+
+
15 Selected: App UI + Full palette
- +
-
-
Selected: Docs + Restrained
+
+
16 Selected: Docs + Restrained
- +
-
-
Selected: Docs + Committed
+
+
17 Selected: Docs + Committed
- +
-
-
Selected: Docs + Full palette
+
+
18 Selected: Docs + Full palette
- +
-
-
Selected: Portfolio + Restrained
+
+
19 Selected: Portfolio + Restrained
- +
-
-
Selected: Portfolio + Committed
+
+
20 Selected: Portfolio + Committed
- +
-
-
Selected: Portfolio + Drenched
+
+
21 Selected: Portfolio + Drenched
- +
@@ -249,35 +251,35 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Font pair (screen 04)

-
-
Selected: Landing page + Font pair
+
+
22 Selected: Landing page + Font pair
- +
-
-
Selected: App UI + Font pair
+
+
23 Selected: App UI + Font pair
- +
-
-
Selected: Docs + Font pair
+
+
24 Selected: Docs + Font pair
- +
-
-
Selected: Portfolio + Font pair
+
+
25 Selected: Portfolio + Font pair
- +
@@ -286,51 +288,51 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Motion (screen 06)

-
-
Selected: Landing page + Restrained
+
+
26 Selected: Landing page + Restrained
- +
-
-
Selected: Landing page + Responsive
+
+
27 Selected: Landing page + Responsive
- +
-
-
Selected: Landing page + Choreographed
+
+
28 Selected: Landing page + Choreographed
- +
-
-
Selected: Portfolio + Restrained
+
+
29 Selected: Portfolio + Restrained
- +
-
-
Selected: Portfolio + Responsive
+
+
30 Selected: Portfolio + Responsive
- +
-
-
Selected: Portfolio + Choreographed
+
+
31 Selected: Portfolio + Choreographed
- +
@@ -339,51 +341,51 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Layout (screen 07)

-
-
Selected: Landing page + Simple grid
+
+
32 Selected: Landing page + Simple grid
- +
-
-
Selected: Landing page + Balanced
+
+
33 Selected: Landing page + Balanced
- +
-
-
Selected: Landing page + Freeform
+
+
34 Selected: Landing page + Freeform
- +
-
-
Selected: Portfolio + Simple grid
+
+
35 Selected: Portfolio + Simple grid
- +
-
-
Selected: Portfolio + Balanced
+
+
36 Selected: Portfolio + Balanced
- +
-
-
Selected: Portfolio + Freeform
+
+
37 Selected: Portfolio + Freeform
- +
@@ -392,107 +394,107 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Boundaries (screen 08)

-
-
Selected: Landing page + Open space
+
+
38 Selected: Landing page + Open space
- +
-
-
Selected: Landing page + Thin dividers
+
+
39 Selected: Landing page + Thin dividers
- +
-
-
Selected: Landing page + Surface changes
+
+
40 Selected: Landing page + Surface changes
- +
-
-
Selected: Landing page + Cards and panels
+
+
41 Selected: Landing page + Cards and panels
- +
-
-
Selected: App UI + Thin dividers
+
+
42 Selected: App UI + Thin dividers
- +
-
-
Selected: App UI + Surface changes
+
+
43 Selected: App UI + Surface changes
- +
-
-
Selected: App UI + Cards and panels
+
+
44 Selected: App UI + Cards and panels
- +
-
-
Selected: Docs + Open space
+
+
45 Selected: Docs + Open space
- +
-
-
Selected: Docs + Thin dividers
+
+
46 Selected: Docs + Thin dividers
- +
-
-
Selected: Docs + Surface changes
+
+
47 Selected: Docs + Surface changes
- +
-
-
Selected: Portfolio + Open space
+
+
48 Selected: Portfolio + Open space
- +
-
-
Selected: Portfolio + Thin dividers
+
+
49 Selected: Portfolio + Thin dividers
- +
-
-
Selected: Portfolio + Surface changes
+
+
50 Selected: Portfolio + Surface changes
- +
@@ -501,123 +503,123 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Corners (screen 09)

-
-
Selected: Landing page + Sharp
+
+
51 Selected: Landing page + Sharp
- +
-
-
Selected: Landing page + Slightly soft
+
+
52 Selected: Landing page + Slightly soft
- +
-
-
Selected: Landing page + Friendly
+
+
53 Selected: Landing page + Friendly
- +
-
-
Selected: Landing page + Pill-like
+
+
54 Selected: Landing page + Pill-like
- +
-
-
Selected: App UI + Sharp
+
+
55 Selected: App UI + Sharp
- +
-
-
Selected: App UI + Slightly soft
+
+
56 Selected: App UI + Slightly soft
- +
-
-
Selected: App UI + Friendly
+
+
57 Selected: App UI + Friendly
- +
-
-
Selected: App UI + Pill-like
+
+
58 Selected: App UI + Pill-like
- +
-
-
Selected: Docs + Sharp
+
+
59 Selected: Docs + Sharp
- +
-
-
Selected: Docs + Slightly soft
+
+
60 Selected: Docs + Slightly soft
- +
-
-
Selected: Docs + Friendly
+
+
61 Selected: Docs + Friendly
- +
-
-
Selected: Docs + Pill-like
+
+
62 Selected: Docs + Pill-like
- +
-
-
Selected: Portfolio + Sharp
+
+
63 Selected: Portfolio + Sharp
- +
-
-
Selected: Portfolio + Slightly soft
+
+
64 Selected: Portfolio + Slightly soft
- +
-
-
Selected: Portfolio + Friendly
+
+
65 Selected: Portfolio + Friendly
- +
@@ -626,90 +628,90 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio

Depth (screen 10)

-
-
Selected: Landing page + Flat
+
+
66 Selected: Landing page + Flat
- +
-
-
Selected: Landing page + Soft lift
+
+
67 Selected: Landing page + Soft lift
- +
-
-
Selected: Landing page + Floating
+
+
68 Selected: Landing page + Floating
- +
-
-
Selected: App UI + Flat
+
+
69 Selected: App UI + Flat
- +
-
-
Selected: App UI + Soft lift
+
+
70 Selected: App UI + Soft lift
- +
-
-
Selected: Docs + Flat
+
+
71 Selected: Docs + Flat
- +
-
-
Selected: Docs + Soft lift
+
+
72 Selected: Docs + Soft lift
- +
-
-
Selected: Portfolio + Flat
+
+
73 Selected: Portfolio + Flat
- +
-
-
Selected: Portfolio + Soft lift
+
+
74 Selected: Portfolio + Soft lift
- +
-
-
Selected: Portfolio + Floating
+
+
75 Selected: Portfolio + Floating
- +