Skip to content

4/6 Facelift: design-token theme, layered layout, About + Documentation pages - #620

Open
mcfrank wants to merge 2 commits into
phase3-cat-paramsfrom
phase25-facelift
Open

4/6 Facelift: design-token theme, layered layout, About + Documentation pages#620
mcfrank wants to merge 2 commits into
phase3-cat-paramsfrom
phase25-facelift

Conversation

@mcfrank

@mcfrank mcfrank commented Jul 9, 2026

Copy link
Copy Markdown
Member

Part of the six-PR stack (merge after #619). Best reviewed by clicking around the preview: http://webcdi-preview.us-west-2.elasticbeanstalk.com

  • webcdi-theme.css: a design-token layer (harbor-blue primary, semantic green checked-state, system font stack at normal weight with bold reserved for headings) loaded after Bootstrap in every base template — no markup rewrites. The old bold-everywhere feel came from console.css's single-weight 2016 Karla @font-face.
  • Layout: sticky navbar with Instruments/Documentation/About links and a user chip; shared footer on all pages; centered login card; boxed console content (was flush against the viewport edge); fixes the invisible navbar hamburger (missing navbar-light).
  • New pages: /about/ (support contacts, citations, links) and /documentation/ — the 16-page PDF manual converted to a sectioned HTML page with a TOC, updated for current UI names, PDF still linked.
  • Home: hero with Register/Login buttons; sponsor/support text in a card at reading weight.

QA: URL smoke baseline (77 routes) byte-identical throughout; phone + desktop screenshots for every page touched.

🤖 Generated with Claude Code

mcfrank and others added 2 commits July 9, 2026 13:51
Design-token layer loaded after Bootstrap in the participant, auth,
home, and researcher base templates. Warm paper ground, deep pine
accent replacing stock Bootstrap blue, green checked-state treatment
that flips the whole checklist card, 44px+ tap targets, keyboard-only
focus rings, and un-underlined <strong>. Also makes the home page
hero responsive (logo max-width, headings allowed to wrap) and drops
hardcoded inline link colors from the login template.

No markup restructuring; the URL smoke baseline is byte-identical.
Verified by screenshot on phone and desktop: home, login, researcher
console, background-info, and vocabulary checklist (checked answers
persist across reload).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The console rendered {% block main %} straight into <main> with no
container, so buttons and text sat flush against the viewport edge;
the theme now centers it at max 1140px with gutters. The navbar was
missing Bootstrap's navbar-light class, leaving the hamburger icon
invisible at narrow widths.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant