Masthead campaign map: no card site-wide, mono-label nav replaces the pills, /Thing hero behind the masthead; cut flat-nav spec
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Meta Vens
parent
e906f0445b
commit
6d9daf787e
2 changed files with 540 additions and 0 deletions
338
docs/masthead-campaign.md
Normal file
338
docs/masthead-campaign.md
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
# Masthead campaign: the masthead on the ground, the pills gone
|
||||
|
||||
Imagination map, revision 1, written 2026-10-02 against `gamecult-site@e906f04`
|
||||
and `GameCult-Quartz@ef43df0`. The Self admits the campaign, target, questions
|
||||
and rulings; this file is the long form the cut specs point at.
|
||||
|
||||
## The operator's words, verbatim
|
||||
|
||||
With a screenshot of `/Thing`, an arrow drawn from the masthead down into the
|
||||
deck's hero:
|
||||
|
||||
> any reason the masthead has its own background separate from the page
|
||||
> background? I feel like it could easily take up that same space (as indicated
|
||||
> by this crude red arrow)
|
||||
|
||||
Asked what the masthead card does once the hero runs behind it (glass card, no
|
||||
card on `/Thing`, no card site-wide, keep it):
|
||||
|
||||
> no card site-wide and let's get rid of those overused pill buttons while we're
|
||||
> at it
|
||||
|
||||
Two rulings follow, for the Self to admit: **ground-behind-masthead** (the
|
||||
masthead has no ground of its own; whatever the page paints runs up behind it,
|
||||
and on `/Thing` that is the deck's hero) and **no-card-no-pills** (no masthead
|
||||
card on any page; the nav is not pill buttons).
|
||||
|
||||
## Where the campaign lives (question `campaign-home`)
|
||||
|
||||
The masthead change is site-wide and has nothing to do with renaming Eve. The
|
||||
`thing` campaign is homed in the Eve repo (`operator-home-eve-repo`) and its
|
||||
target is the rename; folding a site redesign into it would make that target
|
||||
lie about what the campaign protects.
|
||||
|
||||
Options:
|
||||
|
||||
- **new-campaign** (recommended): campaign `site-masthead`, homed in
|
||||
`GameCult/gamecult-site`, target doc this file. Target, short: the masthead
|
||||
sits directly on the page ground on every page; its nav is typeset, not
|
||||
buttons; `/Thing`'s hero runs up behind it. Two cuts at most.
|
||||
- **fold-into-thing**: the masthead cut becomes a cut of `thing`. Cheaper to
|
||||
admit, but the Thing campaign's target and repo list then carry a site
|
||||
redesign, and its Soul passes verify the brand on pages Eve never touched.
|
||||
|
||||
The `/Thing` fixes stay in `thing` either way (cut `deck-page-fixes`, spec in
|
||||
the Eve repo beside the Thing map).
|
||||
|
||||
## Body facts
|
||||
|
||||
**B1. The card.** `site/quartz/styles/custom.scss:646-665`,
|
||||
`.page > #quartz-body .center > .page-header > header`: `display:block`,
|
||||
`margin 0 0 1rem`, padding `1rem 1.15rem 1.05rem`, a 1px sky border at .12,
|
||||
radius 22px, a gradient fill (orange radial at 82% 50% over a 135deg navy
|
||||
gradient at .95-.98 alpha), a 20px/44px drop shadow and an inset hairline.
|
||||
The mobile variant at `1439-1441` only changes the padding. Nothing else on the
|
||||
site styles `.page-header > header`; the ritual-paper essays, the colossus post,
|
||||
`Graph` and `Thing` all inherit this one rule. `tour` and `Pitch` hide the
|
||||
header entirely (`1600-1603`) and are untouched by this campaign.
|
||||
|
||||
**B2. The pills.** `site/quartz/components/GameCultMasthead.tsx:321-329`
|
||||
renders each route as `<a class="gamecult-nav-chip">` (`active` appended);
|
||||
styles at `custom.scss:730-751`: 999px radius, 1px sky border at .16, sky fill
|
||||
at .06, Montserrat 300 at .92rem, min-height 2.15rem; hover and active share
|
||||
one state: orange fill .16, orange border .42, `#fff3e8` text. The nine routes
|
||||
(Studio, Tour, Projects, Pitch, Blog, Graph, Docs, Aetheria, Zyphos) sit in
|
||||
`.gamecult-titlebar-links` (`flex-wrap: wrap; gap .6rem`), so on phones they
|
||||
wrap into three rows of pills. Active-route selection (`pickActiveRoute`,
|
||||
longest matching slug prefix) is sound and is kept.
|
||||
|
||||
**B3. The same pill recipe elsewhere.** `.gamecult-repo-link`
|
||||
(`custom.scss:960`, the per-repo links on project cards) and
|
||||
`.gamecult-action` (`custom.scss:2168`, the home page's call-to-action row,
|
||||
`GameCult/index.md:66-68, 105-107`) use the identical border, fill and radius.
|
||||
The ritual-paper `PREPRINT` badge and page number (`225`, `525`) are mono
|
||||
badges inside a scoped variant, not nav. See question `pill-scope`.
|
||||
|
||||
**B4. The brand doc.** `docs/brand-design-language.md` names neither the card
|
||||
nor the pills as deliberate; it names Montserrat-thin-at-scale, Ubuntu 300, the
|
||||
IBM Plex Mono uppercase tracked label as "a signature of the identity", the
|
||||
wash, and one accent. It warns that Montserrat 100 at 18px "produces grey
|
||||
mush" and says to drop to a heavier weight when a heading must be small. The
|
||||
pills set Montserrat 300 at .92rem, on the wrong side of that warning.
|
||||
|
||||
**B5. The masthead's other parts.** Title `GameCult` (Montserrat 200,
|
||||
`clamp(2.1rem,4vw,3.3rem)`, uppercase, tracked .08em), tagline (Montserrat
|
||||
200, .88rem, lifted from the page's first italic line or the section's
|
||||
sidebar tagline by `gamecult.ts:505`), and three community links (Patreon
|
||||
wordmark, GitHub, Discord) as SVGs with a sky drop-shadow glow. All of these
|
||||
already read as type on a ground; none depends on the card.
|
||||
|
||||
**B6. The frame.** `renderPage.tsx:271-290`: `.page > #quartz-body` is the
|
||||
grid; `.center` is one grid item holding `.page-header` (the masthead and
|
||||
`.popover-hint` with breadcrumbs, title, meta), `article`, `<hr>`,
|
||||
`.page-footer`; the site `footer` is a sibling of `.center` in `grid-footer`.
|
||||
The engine's `Header.css` sets a bare `header { display:flex; align-items:
|
||||
center; margin: 2rem 0; gap: 1.5rem }`, which the site rule in B1 overrides for
|
||||
the masthead and which also reaches every `<header class="xhead">` inside the
|
||||
deck (Soul finding `engine-header-leak`).
|
||||
|
||||
**B7. The Thing page today.** `custom.scss:1148-1179` zeroes `.page` padding
|
||||
and max-width, re-insets `.page-header` to 1680px / 1.2rem, strips the article
|
||||
card, hides the `<hr>`. The deck hero `.thing-deck .stage` (`deck.css:479`) is
|
||||
`100svh` tall with its own ground `var(--inv)` `#03070d` and `overflow:hidden`,
|
||||
`.hero-bg` (orange radial) and `.rays` (sky conic, centred at 55%) absolutely
|
||||
inside it; `.hero-in` is flex-centred. The stage starts below the masthead, so
|
||||
a seam shows where `#03070d` begins under the wash. The site ground's top stop
|
||||
is also `#03070d`, so with the masthead over the stage there is no seam left to
|
||||
hide. `.stage` has `position:relative` and no `z-index`, so its children's
|
||||
`z-index` (burst 3, flash 4) compete with anything laid over it. `deck.js`
|
||||
already measures on resize (`sizeCanvas`, `sizeBurst`).
|
||||
|
||||
**B8. Soul findings on `/Thing`** (`thing:verdict:cut-deck-site-page.s1`):
|
||||
`engine-header-leak` (Medium): eyebrows centred over left-aligned h2s and 32px
|
||||
of extra top margin from the engine `header` rule; `base.scss h1 { font-size }`
|
||||
reaches the hero h1, masked by its children. `chrome-edges` (Low): the site
|
||||
footer's links start at x 0 on `/Thing` at 1440 and 375 (19 and 27 on
|
||||
`/Projects`); the masthead sits at 19.2 instead of 27.2 at 375 because `.page`
|
||||
.7rem plus `#quartz-body` 1rem are both zeroed and only 1.2rem is given back.
|
||||
`body-under-scrollbar` (Low, pre-existing, every page): `GameCult-Quartz
|
||||
base.scss:8-12` sets `html { overflow-x: hidden; width: 100vw }`; `100vw`
|
||||
includes the scrollbar, so with a classic scrollbar the body is 15px wider than
|
||||
the client area and centred content sits 7.5px off. The engine serves nine
|
||||
sites through `quartz-pages.yml@main` (gamecult-site, AetheriaLore, Delvehold,
|
||||
GhostlightDungeon-site, Kalsa, Mimir, Zyphos, pombabranca-site, the engine's
|
||||
own); an engine fix ships to all of them on their next deploy.
|
||||
|
||||
## The shape
|
||||
|
||||
### The masthead without the card
|
||||
|
||||
The title, tagline, community links and nav sit directly on the page ground.
|
||||
The card rule is deleted, not emptied: what remains of
|
||||
`.page > #quartz-body .center > .page-header > header` is the two lines that
|
||||
beat the engine's `header` rule, `display: block; margin: 0 0 1.2rem`. The
|
||||
`.gamecult-titlebar*` flex rules are unchanged. The mobile padding rule goes
|
||||
with the card. The sky glow on the community SVGs stays; it was never the
|
||||
card's.
|
||||
|
||||
Page types this touches, and what each looks like after:
|
||||
|
||||
- **Home (`/`)**: masthead on the wash, then the home article card (24px
|
||||
radius, unchanged). The tagline is the home sidebar's.
|
||||
- **Projects (`/Projects`)**: masthead on the wash above the breadcrumb-less
|
||||
title and the overview sidebar on the left. The repo-link pills on the cards
|
||||
are question `pill-scope`.
|
||||
- **Essays and other content pages**: masthead on the wash, then breadcrumbs,
|
||||
title, meta, article card. The three ritual-paper essays paint their own
|
||||
ground (`custom.scss:101-124`) and the masthead now sits on that ground
|
||||
instead of on a navy card over it, which is the first time the variant reads
|
||||
whole from the top of the page.
|
||||
- **Graph**: single column; masthead on the wash above the SPA shell.
|
||||
- **The sleeping-colossus post**: single column, `.popover-hint` hidden;
|
||||
masthead on the wash above the article.
|
||||
- **`/Thing`**: masthead over the hero (below).
|
||||
- **`tour`, `Pitch`**: header hidden; nothing changes.
|
||||
|
||||
### What replaces the pills (question `nav-treatment`)
|
||||
|
||||
Three options, each in the brand's own terms. All keep `pickActiveRoute` and
|
||||
the route list; all rename the class `gamecult-nav-chip` to `gamecult-nav-link`
|
||||
so no "chip" survives in the DOM; all keep `aria-current="page"` as the
|
||||
accessible active mark (new; the pills had only a class).
|
||||
|
||||
**A. Mono labels** (recommended). The brand doc's signature device: IBM Plex
|
||||
Mono, uppercase, tracked, as a row of structural labels.
|
||||
|
||||
```scss
|
||||
.gamecult-titlebar-links { display: flex; flex-wrap: wrap; gap: 0.45rem 1.5rem; }
|
||||
.gamecult-nav-link {
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
color: rgba(183, 199, 217, 0.84);
|
||||
font-family: var(--codeFont);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gamecult-nav-link:hover { color: var(--tertiary); }
|
||||
.gamecult-nav-link.active { color: var(--secondary); border-bottom-color: var(--secondary); }
|
||||
.gamecult-nav-link[target="_blank"]::after { content: " \2197"; } // ↗ on Aetheria, Zyphos
|
||||
```
|
||||
|
||||
Active page: orange text with a 1px orange rule under the label. Hover: sky.
|
||||
External routes carry a small ↗ so leaving the site is honest. Mobile: the row
|
||||
wraps as today, into two or three rows of labels with a .45rem row gap; at
|
||||
375px roughly four labels fit a row. Nothing is hidden, no scroll affordance
|
||||
is needed. Why it is recommended: it is the one device the brand doc calls a
|
||||
signature; it reads at small size by design, which Montserrat thin does not;
|
||||
and it separates the nav from the Montserrat title above it so the masthead
|
||||
has two voices (display title, mono labels) instead of one voice at two sizes.
|
||||
|
||||
**B. Montserrat text links with an orange rule.** The pills' type kept,
|
||||
the pill removed.
|
||||
|
||||
```scss
|
||||
.gamecult-titlebar-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
|
||||
.gamecult-nav-link {
|
||||
padding: 0.3rem 0;
|
||||
color: #dce7f6;
|
||||
font-family: var(--titleFont);
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.02em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gamecult-nav-link:hover { color: var(--tertiary); }
|
||||
.gamecult-nav-link.active { color: var(--dark); box-shadow: inset 0 -2px 0 var(--secondary); }
|
||||
```
|
||||
|
||||
Active page: heading-white text over a 2px orange rule. Mobile: wraps. Risk:
|
||||
Montserrat 300 at 16px is the size the brand doc says to avoid for the thin
|
||||
face; the pills carried it at .92rem and the result was already soft.
|
||||
|
||||
**C. One typeset row under a hairline.** The nav becomes the masthead's bottom
|
||||
edge, Montserrat 200 at 1.1rem on one line, with a 1px sky hairline above it
|
||||
standing in for the card's edge.
|
||||
|
||||
```scss
|
||||
.gamecult-titlebar-nav { border-top: 1px solid rgba(89, 183, 255, 0.12); padding-top: 0.6rem; }
|
||||
.gamecult-titlebar-links { display: flex; flex-wrap: nowrap; gap: 0 1.25rem; overflow-x: auto; scrollbar-width: none; }
|
||||
.gamecult-nav-link { flex: 0 0 auto; margin-top: -0.6rem; padding-top: 0.6rem; border-top: 2px solid transparent;
|
||||
color: #dce7f6; font-family: var(--titleFont); font-size: 1.1rem; font-weight: 200; text-decoration: none; }
|
||||
.gamecult-nav-link.active { color: var(--secondary); border-top-color: var(--secondary); }
|
||||
```
|
||||
|
||||
Active page: a 2px orange rule sitting on the hairline above the label. Mobile:
|
||||
no wrap; the row scrolls sideways, so Docs, Aetheria and Zyphos are off-screen
|
||||
at 375px until the user drags, and a fade or chevron is needed to say so. Risk:
|
||||
hidden routes on phones, and a hairline is a quiet return of "its own
|
||||
background".
|
||||
|
||||
### `/Thing`: the hero runs up behind the masthead
|
||||
|
||||
Mechanism, all inside the existing `body[data-slug="Thing"]` block and the
|
||||
deck's own files; the engine is not edited:
|
||||
|
||||
- `.center` becomes a two-row grid, `grid-template-areas: "stack" "foot"`.
|
||||
`.page-header` and `article` both take `grid-area: stack`; the header gets
|
||||
`z-index: 5` (above the stage's burst canvas at 3 and flash at 4),
|
||||
`align-self: start`, `justify-self: center`, `width: 100%`,
|
||||
`max-width: 1680px`, `box-sizing: border-box`; `.page-footer` takes `foot`.
|
||||
The stage therefore starts at the top of the page and the masthead is laid
|
||||
over it; masthead plus hero is one screen because the stage is still
|
||||
`100svh`.
|
||||
- The hero content clears the masthead: `.thing-deck .stage { padding-top:
|
||||
var(--masthead-h, 9rem) }` (the stage is `box-sizing: border-box` and
|
||||
flex-centres `.hero-in` in the space that remains). `deck.js` sets
|
||||
`--masthead-h` on the deck root from `document.querySelector('.page-header')
|
||||
.offsetHeight` at init and on resize, next to `sizeCanvas`; the CSS fallback
|
||||
covers a script-less load. The reduced-motion stage
|
||||
(`deck.css:681`) takes `padding-top: calc(var(--masthead-h, 9rem) + 96px)`.
|
||||
- The masthead's inset on this page is one variable, `--thing-inset`, equal
|
||||
to what every other page gets from `.page` plus `#quartz-body`: `1.2rem`
|
||||
on desktop, `2.2rem` below `$desktop` (1200px), `1.7rem` at `$mobile`
|
||||
(800px). `.page-header` and the site `footer` both take `padding-inline:
|
||||
var(--thing-inset)`, and the footer also takes `max-width: 1680px;
|
||||
margin-inline: auto; box-sizing: border-box`. This is the `chrome-edges`
|
||||
fix.
|
||||
- `engine-header-leak`: `.thing-deck .xhead` adds `align-items: stretch;
|
||||
margin: 0` so the engine's `header` rule has nothing left to decide; the
|
||||
reach-in guards gain `.thing-deck h1 { font-size: inherit }`.
|
||||
- The HUD pill on phones (top-right, fixed) overlaps the masthead's community
|
||||
icons until the first scroll; accepted in the Thing map r4 and unchanged.
|
||||
- `body-under-scrollbar` is question `scrollbar-fix-home` below; it is not
|
||||
in the `deck-page-fixes` file changes unless ruled `site-override`.
|
||||
|
||||
## The authority map
|
||||
|
||||
- **Owner.** `custom.scss` owns the masthead's look (one `header` rule, the
|
||||
`.gamecult-titlebar*` rules, the `.gamecult-nav-link` rules);
|
||||
`GameCultMasthead.tsx` owns the masthead's content and the active route;
|
||||
the page's own ground (the body wash, a scoped variant's wash, or the Thing
|
||||
hero) owns what is behind the masthead. On `/Thing`, the slug block owns the
|
||||
stacking and the inset, and `deck.css`/`deck.js` own the hero's clearance.
|
||||
- **Inputs.** The route list and current slug; the page's tagline; the
|
||||
brand tokens in `quartz.config.ts`; on `/Thing`, the measured masthead
|
||||
height.
|
||||
- **Outputs.** One masthead DOM on every page; `aria-current="page"` on the
|
||||
active route.
|
||||
- **Derived state.** The active route is derived from the slug (unchanged).
|
||||
`--masthead-h` is display-only, derived from layout by `deck.js`.
|
||||
`--thing-inset` is derived from the breakpoint and mirrors the site's
|
||||
gutters; it decides nothing on other pages.
|
||||
- **Forbidden writers.** No rule paints a ground, border, radius or shadow on
|
||||
`.page-header > header` or `.gamecult-titlebar`; no `.gamecult-nav-chip`
|
||||
class or `999px` radius in the masthead; no slug-scoped masthead variant
|
||||
(the ritual-paper essays, colossus post, Graph and Thing all get the one
|
||||
masthead); no engine edit for the stacking (`renderPage.tsx`, `Header.tsx`
|
||||
untouched); no site rule inside `.thing-deck`.
|
||||
- **Shared paths.** Every page renders the one `GameCultMasthead` through
|
||||
the engine's `Header`; `/Thing` uses the same slug-block mechanism as the
|
||||
Graph and colossus pages; deploy is the same `Deploy Quartz` workflow.
|
||||
- **Deletion line.** The card rule (`646-665`), the mobile card padding
|
||||
(`1439-1441`) and the chip rules (`730-751`) are deleted before any nav
|
||||
rule is written; the `gamecult-nav-chip` class is renamed in the component
|
||||
in the same commit.
|
||||
|
||||
## Questions (one fork each; the Self admits them)
|
||||
|
||||
### `campaign-home`
|
||||
Options: **new-campaign** (`site-masthead`, homed in gamecult-site) or
|
||||
**fold-into-thing**. Recommended: new-campaign (reasons above).
|
||||
|
||||
### `nav-treatment`
|
||||
Options: **mono-labels** (A), **montserrat-rule** (B), **typeset-row** (C).
|
||||
Recommended: mono-labels. The spec `docs/masthead-cut-flat-nav.spec.json`
|
||||
assumes A; under B or C the same deletions apply and the `adds` entry for the
|
||||
nav rules is replaced by that option's block above.
|
||||
|
||||
### `pill-scope`
|
||||
The operator pointed at the masthead. The same pill recipe also dresses
|
||||
`.gamecult-repo-link` (project cards) and `.gamecult-action` (home CTAs).
|
||||
Options: **masthead-only** (this cut) or **all-pill-recipe** (repo links
|
||||
become mono labels in the card's own row; the CTAs become Montserrat 300 text
|
||||
links with an orange rule, the primary one orange-filled square-cornered).
|
||||
Recommended: masthead-only now, and `all-pill-recipe` as a second cut of the
|
||||
same campaign once the masthead is seen live, since "overused" is a judgment
|
||||
best made against the new masthead rather than the old one.
|
||||
|
||||
### `scrollbar-fix-home`
|
||||
`html { width: 100vw }` is the engine's. Options: **engine** (delete the line
|
||||
in `GameCult-Quartz/quartz/styles/base.scss:11`; one commit; ships to nine
|
||||
sites on their next deploy) or **site-override** (`html { width: auto }` in
|
||||
`custom.scss`; gamecult-site only; the other eight keep the bug). Recommended:
|
||||
engine; the owner of the rule is the right place to fix it and the fix is a
|
||||
deletion. Under `engine` the fix is its own one-line cut on the engine repo,
|
||||
not part of `deck-page-fixes`.
|
||||
|
||||
## Cut order
|
||||
|
||||
1. `thing` / `deck-page-fixes` (`F:\Projects\Eve\docs\thing-cut-deck-page-fixes.spec.json`):
|
||||
the stacking, the inset, the header-leak guard. Independent of the masthead.
|
||||
2. `site-masthead` / `flat-nav` (`docs/masthead-cut-flat-nav.spec.json`): card
|
||||
and pills deleted, mono labels in, brand doc amended. Lands after 1 so the
|
||||
two edits to the Thing block in `custom.scss` do not collide.
|
||||
3. Optional, after the operator has seen 2 live: `all-pill-recipe` if so ruled;
|
||||
the engine `width: 100vw` cut if ruled `engine`.
|
||||
202
docs/masthead-cut-flat-nav.spec.json
Normal file
202
docs/masthead-cut-flat-nav.spec.json
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
{
|
||||
"campaign": "site-masthead",
|
||||
"cut": "flat-nav",
|
||||
"revision": 1,
|
||||
"title": "The masthead sits on the page ground on every page: the card and its shadow deleted, the nav pills replaced by IBM Plex Mono tracked labels with an orange active rule, the brand doc amended",
|
||||
"repo": "GameCult/gamecult-site",
|
||||
"branch": "main",
|
||||
"base": "e906f0445b5e05c5b892af122a09bd786b49875f",
|
||||
"depends_on": [],
|
||||
"first": [
|
||||
"Map: docs/masthead-campaign.md, sections 'The operator's words', 'Body facts' B1-B5, 'The shape' > 'The masthead without the card' and 'What replaces the pills', 'The authority map'. The operator's words, verbatim: 'no card site-wide and let's get rid of those overused pill buttons while we're at it'. Rulings assumed: site-masthead:ruling:operator-ground-behind-masthead and site-masthead:ruling:operator-no-card-no-pills.",
|
||||
"Questions assumed: campaign-home = new-campaign (this spec's campaign slug); nav-treatment = mono-labels (option A in the map); pill-scope = masthead-only (.gamecult-repo-link and .gamecult-action are not touched here). Under nav-treatment B or C the deletions below stand and the nav rules in adds are replaced by that option's block in the map.",
|
||||
"Land after thing/deck-page-fixes so the two edits to the body[data-slug=\"Thing\"] block in custom.scss do not collide; rebase onto its landing head and re-read the line numbers below (they are from e906f04 and shift by that cut's delta inside the Thing block only; everything this cut edits is above line 1148 or in another file).",
|
||||
"Brand sources are canonical: site/quartz.config.ts configuration.theme (codeFont IBM Plex Mono, titleFont Montserrat; secondary #ff8a2a, tertiary #59b7ff, darkgray #b7c7d9, dark #eef5ff) and custom.scss. The brand doc docs/brand-design-language.md is a guide and is amended by this cut because it will otherwise be silent on a decision the operator made.",
|
||||
"The masthead component is site/quartz/components/GameCultMasthead.tsx; the nav anchors are rendered at lines 321-329 with class gamecult-nav-chip and active appended. The engine's Header.css sets header { display:flex; align-items:center; margin:2rem 0; gap:1.5rem }, which the site must still beat for the masthead with display:block and its own margin.",
|
||||
"Deploy is push to main -> workflow 'Deploy Quartz' -> GitHub Pages at gamecult.org; small commits; CI is the verifier. A local .\\scripts\\quartz\\quartz.ps1 build is optional on Starfire."
|
||||
],
|
||||
"deletes": [
|
||||
{
|
||||
"path": "site/quartz/styles/custom.scss",
|
||||
"lines": 18,
|
||||
"note": "Lines 646-665, the masthead card: position, align-items, padding, border, border-radius 22px, the radial+linear background, box-shadow, overflow are deleted. The rule survives as two declarations only: display: block; margin: 0 0 1.2rem (what beats the engine's header rule)."
|
||||
},
|
||||
{
|
||||
"path": "site/quartz/styles/custom.scss",
|
||||
"lines": 22,
|
||||
"note": "Lines 730-751, .gamecult-nav-chip and its :hover/.active rule: deleted whole (999px radius, sky border and fill, orange hover fill). Replaced by the .gamecult-nav-link rules in adds."
|
||||
},
|
||||
{
|
||||
"path": "site/quartz/styles/custom.scss",
|
||||
"lines": 3,
|
||||
"note": "Lines 1439-1441 in the $mobile block, the card's phone padding: deleted; there is no card to pad."
|
||||
}
|
||||
],
|
||||
"keeps_moves": [
|
||||
"The masthead's structure and content are unchanged: title, tagline, community links (Patreon wordmark, GitHub, Discord with their sky glow), the nine routes and pickActiveRoute. Only the nav anchors' class and the surrounding styles change.",
|
||||
".gamecult-titlebar, -top, -copy, -title, -tagline, -nav, -community, -wordmark and -icon rules (custom.scss 667-729, 753-811) and their $mobile variants (1443-1485) are unchanged.",
|
||||
"The page-header margin-top rules (638, 1435) are unchanged; the masthead's distance from the top of the page is theirs.",
|
||||
"The ritual-paper essays, the colossus post, Graph, Thing, tour and Pitch keep their slug blocks; none of them styled the card or the chips, so none changes here.",
|
||||
".gamecult-repo-link (960) and .gamecult-action (2168) keep their pill recipe under pill-scope = masthead-only."
|
||||
],
|
||||
"adds": [
|
||||
"GameCultMasthead.tsx lines 321-329: class becomes gamecult-nav-link (active appended as before), and the anchor carries aria-current={active ? \"page\" : undefined}. No other change to the component.",
|
||||
"custom.scss, where the chip rules were (after .gamecult-titlebar-links at 722-728, whose gap becomes 0.45rem 1.5rem): .gamecult-nav-link { padding: 0.35rem 0; border-bottom: 1px solid transparent; color: rgba(183, 199, 217, 0.84); font-family: var(--codeFont); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; } .gamecult-nav-link:hover, .gamecult-nav-link:focus-visible { color: var(--tertiary); } .gamecult-nav-link.active { color: var(--secondary); border-bottom-color: var(--secondary); } .gamecult-nav-link[target=\"_blank\"]::after { content: \" \\2197\"; }",
|
||||
"custom.scss 646: the surviving header rule reads .page > #quartz-body .center > .page-header > header { display: block; margin: 0 0 1.2rem; } and nothing else.",
|
||||
"docs/brand-design-language.md, a new section '## Masthead' after the Palette section (after line 84): the masthead sits directly on the page ground on every page, no card, border, radius or shadow; the nav is the mono-uppercase-tracked label device, active page in the orange accent with a 1px orange rule, hover in sky, external routes marked with an arrow; the title stays Montserrat 200 uppercase tracked. Six to ten lines; reference the rules by selector, not line number. Update the 'Written' line to name this revision's date."
|
||||
],
|
||||
"file_changes": [
|
||||
{
|
||||
"location": {
|
||||
"path": "site/quartz/styles/custom.scss",
|
||||
"line": 646,
|
||||
"end_line": 665
|
||||
},
|
||||
"change": "the card rule reduced to display: block; margin: 0 0 1.2rem."
|
||||
},
|
||||
{
|
||||
"location": {
|
||||
"path": "site/quartz/styles/custom.scss",
|
||||
"line": 722,
|
||||
"end_line": 751
|
||||
},
|
||||
"change": ".gamecult-titlebar-links gap becomes 0.45rem 1.5rem; the .gamecult-nav-chip rules are replaced by the .gamecult-nav-link rules."
|
||||
},
|
||||
{
|
||||
"location": {
|
||||
"path": "site/quartz/styles/custom.scss",
|
||||
"line": 1439,
|
||||
"end_line": 1441
|
||||
},
|
||||
"change": "the $mobile card padding rule deleted."
|
||||
},
|
||||
{
|
||||
"location": {
|
||||
"path": "site/quartz/components/GameCultMasthead.tsx",
|
||||
"line": 321,
|
||||
"end_line": 329
|
||||
},
|
||||
"change": "class gamecult-nav-link (+ active); aria-current=\"page\" on the active route."
|
||||
},
|
||||
{
|
||||
"location": {
|
||||
"path": "docs/brand-design-language.md",
|
||||
"line": 84,
|
||||
"end_line": 84
|
||||
},
|
||||
"change": "new '## Masthead' section inserted after the Palette section; the 'Written' line dated."
|
||||
}
|
||||
],
|
||||
"authority_map": {
|
||||
"owner": "custom.scss owns the masthead's look: one header rule that beats the engine's, the .gamecult-titlebar* rules and the .gamecult-nav-link rules. GameCultMasthead.tsx owns the masthead's content and the active route. The page's own ground (the body wash, a scoped variant's wash, the Thing hero) owns what is behind the masthead; the masthead paints none.",
|
||||
"inputs": [
|
||||
"the route list and the current slug (GameCultMasthead.tsx)",
|
||||
"the page's tagline (gamecult.ts headerTagline)",
|
||||
"the brand tokens: --codeFont, --titleFont, --secondary, --tertiary, --darkgray, --dark"
|
||||
],
|
||||
"outputs": [
|
||||
"one masthead DOM on every page with <a class=\"gamecult-nav-link\"> routes and aria-current=\"page\" on the active one",
|
||||
"the masthead's type sitting on the page ground on /, /Projects, /Blog/*, the three ritual-paper essays, /Graph, the colossus post and /Thing"
|
||||
],
|
||||
"derived_state": [
|
||||
"the active route, derived from the slug by pickActiveRoute (unchanged)",
|
||||
"the external arrow, derived from target=_blank, which the component already sets for external routes"
|
||||
],
|
||||
"forbidden_writers": [
|
||||
"no rule paints a background, border, border-radius or box-shadow on .page-header > header or on .gamecult-titlebar",
|
||||
"no gamecult-nav-chip class in the component or the stylesheet; no 999px radius or sky fill in the .gamecult-nav-link rules",
|
||||
"no slug-scoped masthead variant: every page gets the one masthead",
|
||||
"no engine edit (Header.tsx keeps its bare header rule; the site beats it with display:block and margin)",
|
||||
"no change to .gamecult-repo-link or .gamecult-action under pill-scope = masthead-only"
|
||||
],
|
||||
"shared_paths": [
|
||||
"every page renders the one GameCultMasthead through the engine's Header",
|
||||
"the same Deploy Quartz workflow and Pages origin"
|
||||
],
|
||||
"deletion_line": "the card declarations (646-665), the mobile card padding (1439-1441) and the chip rules (730-751) are deleted in the first commit, with the component's class rename in the same commit, before the .gamecult-nav-link rules and the brand doc section are written."
|
||||
},
|
||||
"verification": {
|
||||
"builds": [
|
||||
"Deploy Quartz on GameCult/gamecult-site green for the landing commit: gh run list -R GameCult/gamecult-site -w \"Deploy Quartz\" -L 1",
|
||||
"optional: .\\scripts\\quartz\\quartz.ps1 build succeeds locally"
|
||||
],
|
||||
"tests": [
|
||||
{
|
||||
"name": "computed style of .page-header > header on /, /Projects, /Blog/small-ritual-of-reach, /Graph, the colossus post and /Thing",
|
||||
"pins": "Pins operator-no-card-no-pills on every page type, including the scoped variants. Expect: computed style of .page > #quartz-body .center > .page-header > header on /, /Projects, /Blog/small-ritual-of-reach, /Graph, /Blog/the-sleeping-colossus-refuses-the-throne and /Thing: background-image none, background-color transparent, border-style none, border-radius 0px, box-shadow none, display block. operator-no-card-no-pills: no masthead card on any page type, including the scoped variants."
|
||||
},
|
||||
{
|
||||
"name": "screenshots of /, /Projects and /Blog/small-ritual-of-reach at 1440 and 375",
|
||||
"pins": "Pins operator-ground-behind-masthead. Expect: screenshots of /, /Projects and /Blog/small-ritual-of-reach at 1440 and 375: the title, tagline, community icons and nav sit on the page's own wash (the ritual essay's violet ground shows through where the navy card was). operator-ground-behind-masthead: the page ground runs up behind the masthead."
|
||||
},
|
||||
{
|
||||
"name": "computed styles of the .gamecult-nav-link anchors on /Projects, active and inactive",
|
||||
"pins": "Pins nav-treatment = mono-labels as specified; the active page is told in the accent and to assistive tech. Expect: computed style of a .gamecult-nav-link on /Projects: font-family starts with IBM Plex Mono, font-size 12.48px, text-transform uppercase, letter-spacing about 1.75px, border-radius 0px, background-color transparent; the Projects link has class active, aria-current=\"page\", color rgb(255, 138, 42) and border-bottom-color rgb(255, 138, 42); the Studio link's color is rgba(183, 199, 217, 0.84). nav-treatment = mono-labels as specified; the active page is told in the accent and to assistive tech."
|
||||
},
|
||||
{
|
||||
"name": "document.querySelectorAll('.gamecult-nav-chip').length is 0 on every page sampled; '.gamecult-nav-link' is 9; the Aetheria and Zyphos links' ::after content is the arrow",
|
||||
"pins": "no chip survives; external routes are marked."
|
||||
},
|
||||
{
|
||||
"name": "at 375 wide on /Projects: the nav wraps into at most three rows, no link is clipped, no horizontal scrollbar; the title is 1.9rem as before",
|
||||
"pins": "mobile behaviour: wrap, nothing hidden."
|
||||
},
|
||||
{
|
||||
"name": "pickActiveRoute behaviour by sampling: / marks Studio, /Open-Source-Model marks Studio, /Projects/CultPong marks Projects, /Blog/project-thing marks Blog, /Thing marks nothing",
|
||||
"pins": "the active route is derived exactly as before; the component change is class and aria only."
|
||||
},
|
||||
{
|
||||
"name": "git diff base..head --stat: only site/quartz/styles/custom.scss, site/quartz/components/GameCultMasthead.tsx and docs/brand-design-language.md; custom.scss net lines negative",
|
||||
"pins": "a subtraction cut: the card and chips leave, less comes back."
|
||||
},
|
||||
{
|
||||
"name": "docs/brand-design-language.md has a '## Masthead' section that names the no-card and mono-label decisions and matches the live rules by selector",
|
||||
"pins": "the brand doc is not silent on a decision the operator made."
|
||||
}
|
||||
],
|
||||
"negative": [
|
||||
{
|
||||
"pattern": "gamecult-nav-chip",
|
||||
"scope": "site/: no match in any file."
|
||||
},
|
||||
{
|
||||
"pattern": "border-radius: 22px|box-shadow:\\s*\\n?\\s*0 20px 44px",
|
||||
"scope": "site/quartz/styles/custom.scss: no match (the card's radius and shadow are gone; 22px elsewhere is .gamecult-overview-sidebar-inner at 1257 and stays)."
|
||||
},
|
||||
{
|
||||
"pattern": "999px",
|
||||
"scope": "the .gamecult-nav-link and .gamecult-titlebar* rules in site/quartz/styles/custom.scss: no match."
|
||||
},
|
||||
{
|
||||
"pattern": "page-header > header\\s*\\{[^}]*(background|border|box-shadow|padding)",
|
||||
"scope": "site/quartz/styles/custom.scss, multiline: no match."
|
||||
},
|
||||
{
|
||||
"pattern": "GameCult-Quartz|quartz/components/Header",
|
||||
"scope": "git diff --name-only base..head: no engine file."
|
||||
}
|
||||
],
|
||||
"operator": [
|
||||
"look at https://gamecult.org/, /Projects and /Thing on a desktop and a phone and say whether the masthead on the ground reads as the site's, and whether the mono labels are the nav you meant when you said no pills"
|
||||
]
|
||||
},
|
||||
"estimate": {
|
||||
"lines_added": 30,
|
||||
"lines_removed": 43,
|
||||
"dependencies_added": [],
|
||||
"dependencies_removed": [],
|
||||
"formats_added": [],
|
||||
"formats_removed": [],
|
||||
"targets_added": [],
|
||||
"targets_removed": []
|
||||
},
|
||||
"rulings": [
|
||||
"site-masthead:ruling:operator-ground-behind-masthead",
|
||||
"site-masthead:ruling:operator-no-card-no-pills"
|
||||
],
|
||||
"questions": [
|
||||
"campaign-home: new-campaign (recommended, assumed by this spec's slug) or fold-into-thing.",
|
||||
"nav-treatment: mono-labels (recommended, assumed) or montserrat-rule or typeset-row; see the map for each option's CSS, mobile behaviour and active mark.",
|
||||
"pill-scope: masthead-only (recommended, assumed) or all-pill-recipe (.gamecult-repo-link and .gamecult-action in a second cut of this campaign)."
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue