Undefined CSS variable

[Username-Matilda]

Ticket: post pages reference seven CSS variables that are never defined

Type: bug (latent / cosmetic)
Component: src/routes/[slug]/+page.svelte, src/routes/posts/+page.svelte
Severity: low — nothing is visibly broken today, but several style rules
silently do nothing, and the article width is not what the code says it is.

Summary

Six declarations across two route components use Open Props variables
(--size-*). Open Props is not a dependency of this project, and none of these
variables are defined anywhere in the codebase. Each declaration is therefore
invalid and dropped by the browser.

The most consequential one is the article width: [slug]/+page.svelte reads as
though post pages are capped at --size-content-3 (60ch in Open Props), but
that rule never applies. Post width actually comes from
.layout { max-inline-size: var(--page-width) } in +layout.svelte, i.e.
40rem. Anyone reading the [slug] component would reasonably conclude the
wrong thing.

Affected lines

File	Line	Declaration
src/routes/[slug]/+page.svelte	76	max-inline-size: var(--size-content-3);
src/routes/[slug]/+page.svelte	102	margin-top: var(--size-2);
src/routes/[slug]/+page.svelte	108	gap: var(--size-3);
src/routes/[slug]/+page.svelte	109	margin-top: var(--size-7);
src/routes/[slug]/+page.svelte	113	padding: var(--size-2) var(--size-3);
src/routes/posts/+page.svelte	57	margin-top: var(--size-3);

How to reproduce

grep -rn -E "var\(--size-[a-z0-9-]+\)" src/    # 6 usages
grep -rn -- "--size-" src/styles/*.css         # 0 definitions
grep -c "open-props" package.json pnpm-lock.yaml   # 0, 0

Or in devtools on any post page: inspect article and note that
max-inline-size is struck through as invalid.

Likely cause

Open Props was probably used, or planned, early on and later dropped without
removing the variable references. They fail silently, so nothing surfaced it.

Suggested fix

Replace each with the project's own spacing tokens, which already exist
(--spacing-xs: 0.5rem, --spacing-sm: 1rem, --spacing-md: 2rem,
--spacing-lg: 4rem in src/styles/styles.css):

• --size-2 → --spacing-xs
• --size-3 → --spacing-sm
• --size-7 → --spacing-lg

Please treat the width separately from the spacing. The five spacing
declarations currently resolve to nothing, so giving them real values will
shift layout slightly — worth eyeballing a post page before and after, rather
than assuming it is a no-op.

For line 76, decide explicitly what post width should be:

• Delete the line. Honest about current behaviour: posts are capped at
  --page-width (40rem) by the layout, and nothing changes visually.
• Set a real value, e.g. max-inline-size: 60ch, if narrower measure for
  prose is actually wanted. Note this would only take effect if it is narrower
  than the 40rem the layout already imposes.

The first option is the smaller change and reflects what the site does today.

Context

Found while building /us-take-action, when checking whether the new pages
matched the site's standard content width. They do — the whole layout is capped
at --page-width: 40rem, and every post sits inside it. The [slug] rule that
appears to set a different width is inert. Nothing in that PR depends on this
being fixed.

Related, if anyone wants wider content pages: --page-width is the single knob,
and the comment beside it (/* Please update in media queries and $lib/config.ts */) flags that it is duplicated in at least two other places.