|
1 | | -# Gallery design direction — prototype for the Option-2 fleet facelift |
2 | | - |
3 | | -This local gallery (`docs/gallery/`, generated by `scripts/build_gallery.py` from |
4 | | -`examples/gallery.json`) is the **deliberate prototype** for the eventual shared-template |
5 | | -facelift tracked in [Developer-Tools-Directory#86](https://github.com/TMHSDigital/Developer-Tools-Directory/issues/86) |
6 | | -and the ROADMAP "Fleet Pages examples support" candidate. The markup here is throwaway on |
7 | | -migration; the **data** (`gallery.json`) and the **visual direction** below are what carry over. |
8 | | - |
9 | | -## Tokens (aligned to the fleet landing page so the two never clash) |
10 | | - |
11 | | -| Token | Dark | Light | Notes | |
12 | | -| --- | --- | --- | --- | |
13 | | -| `--bg` | `#0d1117` | `#f6f8fa` | matches landing's GitHub-dark base | |
14 | | -| `--surface` | `#161b22` | `#ffffff` | card background | |
15 | | -| `--surface-2` | `#1c2128` | `#f0f2f5` | toggle / inline code | |
16 | | -| `--border` | `#30363d` | `#d0d7de` | | |
17 | | -| `--text` | `#e6edf3` | `#1f2328` | | |
18 | | -| `--text-dim` | `#8b949e` | `#656d76` | secondary text | |
19 | | -| `--accent` / `--accent-light` | `#7c3aed` / `#a78bfa` | same | from `site.json`; shared with landing | |
20 | | -| `--radius` / `--radius-lg` | `8px` / `12px` | — | cards use `-lg` | |
21 | | -| font | `'Inter', system-ui…` | — | landing ships the Inter webfont; the prototype uses the same stack and falls back to system sans (no coupling to the fleet font files) | |
22 | | - |
23 | | -## Type scale |
24 | | -- Page title `h1`: `clamp(1.9rem, 4vw, 2.6rem)`, `letter-spacing: -0.02em` — fluid hero. |
25 | | -- Card title `h2`: `1.22rem`. |
26 | | -- Body: `1rem` / `line-height: 1.6`; secondary `0.9rem`; tag `0.68rem` uppercase. |
27 | | - |
28 | | -## Layout |
29 | | -- Container `max-width: 1080px`, centered, `1.25rem` side padding. |
30 | | -- Grid: **1 column** mobile → **2 columns at ≥720px**, `align-items: stretch` so paired cards share a row height. |
31 | | -- **Heroes are a uniform 16:9** (`aspect-ratio: 16/9; object-fit: cover`). This was a deliberate revision: the first cut used mixed aspects (8:3 swatch panorama + 16:9 stills) with `align-items: start`, which — confirmed by headless screenshots — left a ragged empty gap under the short card on desktop. The swatch hero was re-rendered at 16:9 so all three share an aspect; with uniform heroes `object-fit: cover` no longer crops anything. Keep new heroes 16:9. |
32 | | -- Card is a flex column; the "View example" link is pinned to the bottom (`margin-top: auto`) so footers align across a row. Hover lifts `-3px` with an accent-tinted border and soft shadow. |
33 | | - |
34 | | -## Theme |
35 | | -- Tri-state **auto / light / dark** mirroring the landing: `data-theme` on `<html>`, persisted in `localStorage['theme']` — **the same key the landing uses**, so a visitor's choice carries across both pages. |
36 | | -- FOUC guard runs before first paint. `theme-color` meta per scheme. Toggle cycles auto→light→dark with a sun/moon glyph and an accurate `aria-label`. |
37 | | - |
38 | | -## Navigation / discoverability |
39 | | -- The landing→gallery link is **template-blocked** (the landing nav is fleet-generated). The gallery compensates with self-sufficient outbound nav: a top-bar **back link to the landing** (`../`) and a **GitHub repo link**, plus per-card links to each example on GitHub. A visitor who arrives via the README or a direct link can always navigate out. |
40 | | - |
41 | | -## Accessibility |
42 | | -- Skip-to-content link; `:focus-visible` outlines (accent, 2px); `prefers-reduced-motion` disables hover transform + smooth scroll; descriptive `alt` per hero ("`<name> — <what it teaches>`"); single `h1`, card titles as `h2`. |
43 | | - |
44 | | -## What the fleet template should adopt (not the markup, the direction) |
45 | | -1. The token set above as CSS variables, light/dark parity with the existing landing palette. |
46 | | -2. An **Examples grid** section reading `gallery.json` (per-entry `name/dir/teaches/witnessesFix/hero/preview`), cards styled as here. |
47 | | -3. A **nav link to the gallery** (closes the landing→gallery cross-link gap — impossible today without a template edit). |
48 | | -4. Standardize heroes at **16:9** with `object-fit: cover` and `align-items: stretch` for an even grid; pin card footers (`margin-top: auto`). (Supersedes the first cut's mixed-aspect/`align-items: start` approach, which read as ragged — see Layout.) |
| 1 | +# Site design — the Blender viewport system |
| 2 | + |
| 3 | +The whole site (landing page `docs/index.html` via `scripts/site/`, gallery |
| 4 | +`docs/gallery/` via `scripts/build_gallery.py`) shares one design system: the |
| 5 | +site reads as a Blender viewport session. This replaced the earlier purple |
| 6 | +fleet-template look (2026-07-03); the previous plan to upstream that look into |
| 7 | +the shared template was dropped — the fleet template only scaffolds new tools, |
| 8 | +and each tool's site evolves independently after that. |
| 9 | + |
| 10 | +## Vocabulary |
| 11 | + |
| 12 | +- **Conceit**: topbar = Blender's topbar, footer = its status bar, sections = |
| 13 | + its panels (caret + mono label headers), hero = a viewport with a |
| 14 | + perspective grid floor, red-X/green-Y origin lines, and HUD overlays in the |
| 15 | + corners (mode, axis gizmo, statistics overlay with the pack counts, render |
| 16 | + status `smoke-gated · exit 0`). |
| 17 | +- **Color**: Blender panel grays (`#1a1b1e` bg, `#222327` panel, `#3a3b40` |
| 18 | + border). ONE accent: selection orange `#ff8c19` (Blender's selected-object |
| 19 | + outline; cards use it as a hover outline). Axis colors |
| 20 | + `#ff3352 / #8bdc00 / #2890ff` appear only in the gizmo and grid origin |
| 21 | + lines — they encode, never decorate. Dark only; there is no theme toggle. |
| 22 | +- **Type**: Barlow Condensed 600 uppercase for display; Inter for body; |
| 23 | + JetBrains Mono for every HUD label, stat, name, and chip. Fonts are |
| 24 | + self-hosted in `scripts/site/fonts/` and deployed to `docs/fonts/` by the |
| 25 | + landing build — gallery pages reference them at `../fonts/` / `../../fonts/`. |
| 26 | +- **Copy**: benefit-led headers ("Every render here is a CI artifact"), the |
| 27 | + smoke-gate claim is the headline thesis. |
| 28 | + |
| 29 | +Keep both builders in this system when editing either; the tokens are |
| 30 | +duplicated (template.html.j2 and build_gallery.py SHELL) — change them in |
| 31 | +both places. |
0 commit comments