fix: restore icon-style theme toggle and GitHub topbar buttons by axisrow · Pull Request #38 · axisrow/axisrow.github.io

axisrow · 2026-08-13T07:20:36Z

Summary

Restored a compact circular icon for the theme selector: a sun/moon/monitor SVG icon reflects the current mode (Системная / Светлая / Тёмная), with the native <select> overlaid transparently as the click target so the dropdown still offers all three options.
Replaced the text "GitHub ↗" topbar link with a circular icon button (inline GitHub mark SVG), matching the same size/style as the theme button.
Kept accessibility: aria-label/title on both controls, keyboard-operable native <select>, and a visible focus ring (:has(:focus-visible)).
The GitHub icon button is no longer hidden on mobile (previously display:none), so both controls now show consistently on desktop and mobile.

Testing

npm test — 34/36 pass. The 2 pre-existing failures (starfield canvas missing) are unrelated to this change and reproduce identically on main before this branch.
Verified topbar rendering via headless Chrome screenshots at desktop (1400px) and mobile (390px) widths.

Fixes #37

🤖 Generated with Claude Code

The theme select and GitHub link had regressed to wide text pills after the theme-select rework. Restore compact circular icon buttons for both: the theme select now shows a sun/moon/monitor icon matching the current mode (system/light/dark) with the native <select> as a transparent click target on top, and the GitHub link is now an icon button with an inline GitHub mark, matching the same icon-button style/size. Fixes #37 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0176vakGzooXWuenVBEeKosv

Three follow-ups on the topbar icon work: - Mobile topbar broke onto two rows. .topbar-inner declared four columns while only three children are visible there, and .topbar-actions was left to auto-placement after .menu-toggle had already claimed column 4 — so the grid cursor had passed it and dropped the actions onto row 2. Pin brand/actions/burger to explicit row-1 columns over a 3-column track and right-align the actions. - Restore the original ◐ glyph the pre-select toggle used, replacing the three-SVG sun/moon/monitor set. - Translate the theme control back to English (Colour theme / System / Light / Dark); the page is lang="en" and everything else on it is English, but #26 introduced Russian strings here. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0176vakGzooXWuenVBEeKosv

The panels overlaying a live canvas (stars, projects, proof, contact) each painted a near-opaque plate -- 0.91 via .veil-panel, and 0.97 for proof -- so the field behind them was flattened into a flat rectangle. Add a --veil-canvas token at 0.8 and point those four panels at it, leaving --veil for .project-surface, which has no canvas behind it. 0.8 is the floor rather than a taste call: composited over a black canvas pixel (mandelbrot does reach 0,0,0) it holds the in-panel --ink-faint at 4.91:1 light / 5.74:1 dark, still clear of AA. At 0.72 that secondary copy drops to 3.96:1. Mobile is deliberately untouched: those panels sit directly over the canvas with no side-by-side layout, and the existing mobile rules already tune them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0176vakGzooXWuenVBEeKosv

- Veil panels over a live canvas now use a directional gradient fade (matching .experience-field/.about-field) instead of a flat semi-transparent plate, so the effect visibly runs into the panel. - projects-field-copy fades from the opposite side since its canvas sits to the left. - Bump plasma motion speed, starfield particle count, and copper-bars alpha scale for more visible motion/contrast. - Bump styles.css/effect-skins.js cache-busting query strings. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0176vakGzooXWuenVBEeKosv

axisrow · 2026-08-13T08:15:40Z

🔍 Local review (cycle 1) — round 3d553292-4852-49c1-9a89-a08c71a63223

Reviewed locally (/review + Codex companion), no bots pinged.

Verdict	Reviewer	Finding	Location
FIX	codex	Custom theme dropdown hides its own option text via inherited transparent color, with no rule restoring visibility, making the System/Light/Dark labels unreadable when the list opens.	styles.css:263
FIX	codex + claude	Starfield preview skin raises particle count roughly 10x over the vendored preview budget while a code comment incorrectly claims a densityMax clamp applies, though that clamp only exists for the unused area density mode.	effect-skins.js:113
SKIP	claude	Panel-to-canvas fade backgrounds now reach full transparency near the panel edge, but this matches an existing, already-shipped gradient pattern used elsewhere and is a deliberate, documented tradeoff.	styles.css:658
SKIP	claude	A panel background now depends on a co-present CSS class already present in the markup everywhere it is used today, so nothing currently ships broken, though the coupling is implicit for future edits.	styles.css:1395

Proceeding to fix the two FIX items now.

- .theme-select inherits color: transparent into its <option> elements, making System/Light/Dark unreadable when the dropdown opens in browsers that render option text with the select's author color. Restore an explicit, opaque color/background on .theme-select option. - The starfield preview skin raised particleCount to 900/1200, ~10x the vendored preview.mobile/preview.desktop budget (90/120). densityMode stays "explicit" here, so densityMax never clamps the value -- the prior comment's clamp claim was incorrect. Cap the override at 180/240 (2x budget) and correct the comment. - Add regression tests for both: option-list contrast and a particle-count ceiling relative to the vendored preview budget. - Bump styles.css/effect-skins.js cache-busting query strings. Fixes review findings from cycle 1 (codex + claude /review). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0176vakGzooXWuenVBEeKosv

axisrow · 2026-08-13T08:26:30Z

🔍 Local review (cycle 2) — round 1c2cf750-3f5c-4720-a56e-685f5b377231

Reviewed locally (/review + Codex companion), no bots pinged.

Verdict	Reviewer	Finding	Location
IRRELEVANT	claude	A main.js error-handling concern was raised, but that file has no changes anywhere in this PR, so it falls outside this review scope.	main.js:437
IRRELEVANT	claude	A related main.js code-path concern was raised for the same untouched file and is likewise out of scope for this PR.	main.js:437
IRRELEVANT	claude	A pre-existing, unchanged appearance-merging helper in effect-skins.js was reviewed and confirmed to already handle its inputs correctly, with no defect identified.	effect-skins.js:182
IRRELEVANT	claude	A hypothetical playback-scheduling edge case was raised in untouched main.js code, and the reviewer's own analysis concluded the existing fallback path already handles it gracefully.	main.js:388

Codex companion: approve, zero findings.

No FIX verdicts this round — both configured reviewers answered and found nothing actionable within this PR's scope. Proceeding to the final gate.

axisrow · 2026-08-13T08:27:23Z

📋 Review summary — all cycles

Cycle	Reviewer	Finding	Verdict	Resolution
1	codex	A custom theme dropdown inherited fully transparent text color into its option list, making the labels unreadable when opened.	FIX	Fixed in `4549916`
1	codex + claude	A starfield performance skin raised the particle count roughly tenfold above the vendored preview budget while a code comment incorrectly described a clamp that does not apply in this configuration.	FIX	Fixed in `4549916`
1	claude	A panel-to-canvas fade background reaches full transparency near the panel edge, matching an existing, already-shipped design pattern used elsewhere in the site.	SKIP	Left as-is — matches existing shipped pattern
1	claude	A panel background now relies on a companion CSS class already present everywhere it is used today, a low-priority coupling note rather than a shipped defect.	SKIP	Left as-is — no shipped defect
2	claude (x4)	Round 2 findings targeted a file with no changes in this PR and were out of this review's scope; the one in-scope helper function they touched was confirmed already correct.	IRRELEVANT	No action
2	codex	—	—	Clean approve, zero findings

Totals: 2 FIX (both resolved), 2 SKIP, 4 IRRELEVANT, 0 UNVERIFIED.

Both configured local reviewers (/review + Codex companion) returned a clean verdict on round 2 (head 4549916). Proceeding to CI watch.

axisrow force-pushed the ao/axisrow.github.io-27/fix-topbar-icons branch from 1084219 to 1d0af38 Compare August 13, 2026 07:22

axisrow and others added 3 commits August 13, 2026 14:30

axisrow merged commit dff020b into main Aug 13, 2026
1 check passed

axisrow mentioned this pull request Aug 13, 2026

feat: add merged CodexBar (steipete) PR to contributions block #40

Merged

Navigation Menu

fix: restore icon-style theme toggle and GitHub topbar buttons - #38

fix: restore icon-style theme toggle and GitHub topbar buttons#38
axisrow merged 5 commits into
mainfrom
ao/axisrow.github.io-27/fix-topbar-icons

axisrow commented Aug 13, 2026

Uh oh!

axisrow commented Aug 13, 2026

Uh oh!

axisrow commented Aug 13, 2026

Uh oh!

axisrow commented Aug 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

axisrow commented Aug 13, 2026

Summary

Testing

Uh oh!

axisrow commented Aug 13, 2026

🔍 Local review (cycle 1) — round 3d553292-4852-49c1-9a89-a08c71a63223

Uh oh!

axisrow commented Aug 13, 2026

🔍 Local review (cycle 2) — round 1c2cf750-3f5c-4720-a56e-685f5b377231

Uh oh!

axisrow commented Aug 13, 2026

📋 Review summary — all cycles

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant