mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-06-03 18:51:18 +00:00
Kpa-clawbot
0d8bc7536c
Two related logo fixes bundled together (small scope each). Cc @user-display-not-by-name. ## 1. Restore duotone (fog/teal) split — the original ask The M2 (light-theme readability) fix-cycle on #1137 collapsed both halves of the inline CoreScope wordmark to `var(--logo-text)` so they would invert correctly on light themes. That restored readability but erased the original side-split palette. This change re-uses the existing `--logo-accent` / `--logo-accent-hi` vars (already driving the left/right node arcs and dots) for the wordmark too: - `CORE` → `fill="var(--logo-accent)"` — matches left arcs + left node dot - `SCOPE` → `fill="var(--logo-accent-hi)"` — matches right arcs + right node dot - chirp polyline + `MESH ANALYZER` tagline → unchanged, `var(--logo-muted)` No hardcoded hex; theme customizer overrides via `--accent` / `--accent-hover` keep working on both themes. ## 2. Fix mobile clipping (SCOPE → "SCOF" at ≤390px) The full inline wordmark SVG has ~111px intrinsic content; the `.brand-logo` mobile pin from #1137 (99px width) was squeezing it and visibly clipping SCOPE. **Approach:** swap the full wordmark SVG for a dedicated mark-only inline SVG at ≤400px (option #1 from the design call). Keeps the duotone arcs, dots, and chirp visible — drops the wordmark cleanly. - `public/index.html`: CORE/SCOPE wrapped in `<g class="brand-wordmark">` (clean grouping); new sibling `<svg class="brand-mark-only">` with tight viewBox `425 15 250 230` covering both nodes + dots only. Same `--logo-accent` / `--logo-accent-hi` vars → duotone preserved on mobile. - `public/style.css`: `.brand-mark-only` defaults `display:none`; new `@media (max-width:400px)` rule hides `.brand-logo` and shows `.brand-mark-only`. ## TDD Three commits, red→green→red→green: | commit | role | |---|---| | `d53d328` | RED — duotone assertions (#4, #5) added; master fails (CORE === SCOPE) | | `3e53031` | GREEN — split CORE/SCOPE fills | | `e6b078f` | RED — mobile mark-only swap assertion (#6) at 360x640; master fails (no `.brand-mark-only`) | | `1a3b5db` | GREEN — add the mark-only SVG + media-query swap | ## Files changed - `test-logo-theme-e2e.js` — assertions expanded from 3/3 to 6/6 - `public/index.html` — duotone fills + brand-wordmark grouping + brand-mark-only sibling SVG - `public/home.js` — duotone fills (hero) - `public/style.css` — `.brand-mark-only` defaults + `@media (max-width:400px)` swap rule ## Verification CI Playwright run on commit `3e53031` (after the duotone fix, before the mobile fix) confirmed assertions 1–5 pass: - `navbar duotone preserved (dark: CORE=rgb(74,158,255) SCOPE=rgb(109,179,255); light: CORE=rgb(74,158,255) SCOPE=rgb(109,179,255))` - `hero duotone preserved (dark: CORE=rgb(74,158,255) SCOPE=rgb(109,179,255); light: CORE=rgb(74,158,255) SCOPE=rgb(109,179,255))` Final CI run on `1a3b5db` will additionally exercise the 6th (mobile mark-only swap at 360×640). --------- Co-authored-by: corescope-bot <bot@corescope.local>
