Redesign mobile project-page sidebar with chips + info-list (#1271)

[jonfroehlich]

Closes #1271.

Problem

On mobile, the project page rendered the sidebar's auto-fit 140px grid above the description, jamming unrelated metadata (date, website, code link, lead avatars, contributor count) into shared rows that read as jumbled — and forcing the reader past ~500px of metadata before the description.

Approach

Additive and mobile-only — desktop is untouched. Below 992px the old sidebar grid is hidden and two inline blocks render in the main column instead (the same dual-render-by-breakpoint pattern Related Projects already uses). No display:contents, no JS changes.

Mobile reading order: title → status chips → description → info-list (Links · Team · Funding) → publications/videos/talks → related.

• Status chips under the title: Active/Completed · date range · contributor count.
• Links as compact, clickable outlined chips (Website / Code / Data) — sized so three fit one line, visually distinct from the read-only grey status chips.
• Team as a flat, seniority-ordered lead list with inline role labels (· PI, · Co-PI, · Lead); the first 4 show and the rest collapse into a native <details> "+N more" disclosure (keyboard/AT-accessible, no JS).
• Funding as a wrapping logo row — fixes the orphaned-4th-logo defect.

Desktop keeps the two-column sticky sidebar exactly as before (now hidden <992px, restored ≥992px so the mobile blocks don't duplicate it).

Files

• views/project.py — active_leads_ordered (flat/de-duped/ordered leads w/ role labels).
• templates/website/project.html — the two .project-mobile-meta blocks.
• templates/snippets/display_project_team_member_mobile.html — new compact lead row.
• static/website/css/project.css — mobile-meta styles; sidebar → desktop-only.
• static/website/css/design-tokens.css — --color-status-active-* tokens (chip green 6.9:1 on its fill — AA; no hardcoded hex).
• management/commands/seed_demo_projects.py — sponsor/grant seeding (from the WIP branch), demo projects made public, real links on the Sidewalk-like demo.
• tests/test_project_page.py — regression tests (chips, link chips, Team <details> overflow, funding, Completed/empty case, desktop sidebar still renders).
• .pa11yci.json — 414px-viewport project scan so a11y CI exercises the mobile blocks.

Testing

• New tests pass; full suite 541 passed, 8 pre-existing skips.
• Pa11y: no structural a11y issues on the new markup (dl/dt/dd, links, <details>, alt all clean). Local axe color-contrast flags are the known media-less false positives (they also hit the existing description heading/body). The one genuine marginal finding — green chip at 4.49:1 — was fixed to 6.9:1.

Screenshots

🤖 Generated with Claude Code