Vidminas
### Prerequisites - [x] I have [searched](https://github.com/HugoBlox/kit/issues?q=is%3Aissue) for duplicate or closed feature requests - [x] I am mindful of the project [scope](https://github.com/HugoBlox/kit/blob/main/CONTRIBUTING.md#scope) ### Proposal Introduce **two shared content-width tokens** — a **page** width and a **reading** width — and use them consistently across blocks, views, and the site chrome, instead of each block/view hardcoding its own `max-w-*`. Ideally expose the choice as a small design knob, e.g. `design.width: wide | reading`. Concretely: 1. Define two tokens (CSS custom properties or a tiny map), e.g. - `--hb-width-page` → `max-w-7xl` (80rem) — full-bleed sections (hero, portfolio grids, wide galleries) - `--hb-width-reading` → one value (e.g. `max-w-3xl`, 48rem) — text/list content 2. Resolve every section container to one of the two, including the sub-fixes below. **Current state — the widths hardcoded today (verified against `main`):** | Block / view / chrome | Container width | Tailwind size | |---|---|---| | `resume-biography-3` (hero) | `max-w-7xl` | 80rem | | `portfolio` | `max-w-7xl` | 80rem | | `content-collection` — **title** | `max-w-prose` | ~65ch | | `content-collection` — **"See all"** | `max-w-screen-lg` | 64rem | | `views/citation` (rows) | `max-w-3xl` | 48rem | | `views/date-title-summary` (rows) | `max-w-3xl` | 48rem | | `views/article-grid` | `max-w-screen-lg` | 64rem | | `markdown` block | `max-w-prose` | ~65ch | | navbar / footer | `container` / own width | full-bleed-ish | So a single `collection` section renders its **title (~65ch)**, its **rows (48rem)**, and its **"See all" button (64rem)** at three different widths, and stacking different blocks steps the content edge in and out down the page. **Sub-fixes to fold in:** - The **"See all" button is wider than the list it belongs to** (`max-w-screen-lg` vs the rows' `max-w-3xl`). - The **collection title (`max-w-prose`) doesn't match its own rows**. - Related: **inconsistent horizontal padding** — the hero uses a flat `px-4` while `portfolio` uses `px-4 sm:px-6 lg:px-8`, so side gutters don't line up either. (Happy to include this in the same effort.) Happy to implement once there's agreement on the **token names/values** and whether it should be a config knob vs. fixed CSS variables. ### Motivation and context On any page that combines sections, the content edges don't line up — they step inward section by section — and even *within* one collection section the title, rows, and "See all" button sit at three different widths. This reads as visual "jitter" and makes the theme harder to customise (every width is a separate magic value in a different file). Two shared tokens make the vertical rhythm consistent, make full-width vs. reading-width an intentional choice, and give site owners a single place to adjust content width instead of overriding multiple blocks/views. This came out of a migration where aligning these by hand meant overriding `portfolio`, `content-collection`, `markdown`, `resume-biography-3`, several view `--start` fragments, and the navbar/footer. A shared token would remove the need for this.