iOS Safari can fail to honour transform: translateX(-100%) on position:fixed
elements, leaving the sidebar sitting over the content at z-index 100 and
blocking the mobile-header (z-index 50) that contains the hamburger.
Add visibility: hidden to the closed mobile sidebar. A transition-delay of
0.3s (matching the transform duration) keeps the slide-out animation intact —
the sidebar slides away first, then disappears. The open state resets the
transition immediately so the sidebar becomes visible before sliding in.
https://claude.ai/code/session_017r3kqm4FgEGy2DPPzYcLYQ
* Fix category picker and hamburger using page colours instead of nav colours
Both elements render against --bg-nav but were using --font-colour (the page
text colour). Switch to --nav-link-colour / --nav-section-heading-colour /
--nav-link-active-colour so they remain legible when nav-background is set to
a colour that contrasts with the page text colour (e.g. dark blue nav with
white nav-link text).
https://claude.ai/code/session_01MA8V1FvCmxjkCYyTxseaxB
* Fix category font not reverting when switching to a no-font category
maybeLoadCategoryFont applied a font-family to document.body but never
cleared it when switching to a category with no font defined. The inline
style overrides the CSS --font-body variable, so the category font
persisted indefinitely.
Fix: reset document.body.style.fontFamily to '' when the target category
has no font (letting --font-body take effect), and re-apply the family
string when switching back to an already-loaded font category.
https://claude.ai/code/session_01MA8V1FvCmxjkCYyTxseaxB
---------
Co-authored-by: Claude <noreply@anthropic.com>
Both elements render against --bg-nav but were using --font-colour (the page
text colour). Switch to --nav-link-colour / --nav-section-heading-colour /
--nav-link-active-colour so they remain legible when nav-background is set to
a colour that contrasts with the page text colour (e.g. dark blue nav with
white nav-link text).
https://claude.ai/code/session_01MA8V1FvCmxjkCYyTxseaxB
Co-authored-by: Claude <noreply@anthropic.com>
Nastaliq and other complex scripts need significantly more vertical
space than Latin text. A new `line-height` key on any category entry
in config.yml overrides --line-height-body for that category and
restores the theme default when switching away.
https://claude.ai/code/session_01LZVnq4wUgdv5oXFLcj6qXf
The mobile header was hidden via mobileHeader.style.display='none' (inline style),
then a dynamically-injected <style> with !important was supposed to reveal it on mobile.
Inline styles and injected stylesheets interact inconsistently across browsers, making
the hamburger invisible on mobile in practice.
Replace with a simple CSS-only approach: add a base rule
'.layout-sidebar .mobile-header { display: none; }' so the existing media-query
'display: flex' override works through normal cascade — no inline style needed,
no !important injection needed.
https://claude.ai/code/session_01HRJsjppKZ2cpmNUAV2NXds
Two new top-level theme.yml keys — nav-section-expand-icon and
nav-section-collapse-icon — replace the hardcoded arrow_right/arrow_drop_down
used on collapsible nav sections. Defaults preserve existing behaviour.
Eight new icon SVGs added to app/assets/icons/:
keyboard_arrow_right / keyboard_arrow_down (chevrons)
keyboard_double_arrow_right / keyboard_double_arrow_down
expand_content / collapse_content (corner arrows)
add / minimize (plus/minus)
All eight added to STANDARD_ICONS so fetch-deps bundles them correctly.
CLAUDE.md key reference and docs/claude-design.md updated with the full
icon catalogue, pairing guidance, and style notes for Claude Design.
https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
Documents every colour pairing to check, WCAG contrast targets for each
role, and common failure modes (saturated accents, muted text on tinted
backgrounds, dark-mode text-muted). Checklist expanded with contrast items.
https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
Separates sidebar header colours from nav link colours. The three new keys
control the site name, site description, and dark/light toggle independently,
each cascading from the nearest nav variable (nav-sitename → nav-link,
nav-description and nav-toggle → nav-section-heading) so existing themes
are unaffected.
Enables Claude Design to fine-tune sidebar header legibility on saturated or
bold nav backgrounds without having to override the nav link colours, and vice
versa. CSS selectors and applyThemeYml() updated; app/theme.yml, CLAUDE.md,
and docs/claude-design.md updated with full key reference and pattern examples.
https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
Clarifies that nav-link, nav-link-active, and nav-section-heading affect not
just nav links but also the site name, description, and theme toggle — all
sidebar elements that inherit from these variables. Adds a rule of thumb for
when to set the keys explicitly (saturation >20%, or lightness outside the
neutral range).
https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
Site name, site description, and dark/light mode toggle all used content-area
colour variables (--font-colour, --font-colour-muted, --divider) which clash
when nav-background differs from the page background. All three now reference
the nav colour variables (--nav-link-colour, --nav-link-active-colour,
--nav-section-heading-colour) with graceful fallbacks, so they remain legible
on any nav background colour without requiring new theme.yml keys.
https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
--divider in both light and dark modes now auto-derives from the theme's
background and text colours using color-mix(in srgb, bg 85%, text), so
accent-coloured or custom-background themes get a correct divider without
any extra config. An explicit `divider` key in theme.yml overrides this
for the rare cases where exact control is needed.
docs/claude-design.md and CLAUDE.md updated accordingly.
https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
