Style hamburger menu to match navbar pill design

[mcclowes]

The mobile hamburger toggle now uses offwhite color on the green navbar
pill (and green on offwhite in dark mode), consistent with other navbar
items. Also styles the hover state and ensures the sidebar close button
uses appropriate page-level colors.

https://claude.ai/code/session_01HJJ6HCx47HfiGUFLgFpHE3

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mcclowes-com	Ready	Preview, Comment	Mar 27, 2026 5:52pm

[github-actions]

🤖 Claude PR Summary

Pull Request Analysis

Overview

This PR updates the styling for the mobile hamburger menu toggle button to match the navbar's pill-style design and ensure proper theming across light/dark modes.

Key Files Modified

• src/css/custom.css - All changes are CSS-only modifications to the navbar toggle button styling

Main Changes

1. Hamburger Menu Styling (navbar)

   • Added color and hover states for the .navbar__toggle button
   • Light theme: off-white color with subtle white hover background
   • Dark theme: green color with subtle black hover background

2. Mobile Sidebar Override

   • Added specific styling for .navbar-sidebar .navbar__toggle to use different colors when the sidebar is open
   • Inverts the color scheme (green in light mode, off-white in dark mode)

Notable Patterns & Observations

✅ Strengths:

• Consistent theming pattern using [data-theme='dark'] selector
• Progressive enhancement approach (base styles → theme overrides → context-specific overrides)
• Uses CSS custom properties (var(--color-*)) for maintainability

⚠️ Considerations:

• Color choices appear intentional (matching "pill style") but ensure --color-green and --color-offwhite variables are defined
• The sidebar override inverts the color scheme - verify this provides adequate contrast in both contexts
• Hover opacity values (0.1 and 0.08) are quite subtle - confirm they're visually noticeable

Recommendation: Test on actual mobile devices to verify hover states work appropriately and colors meet accessibility standards (contrast ratios).

---

Generated by Claude