- Remove <hr/> from header flex container that broke title centering
- Apply viewport-fit zoom logic on all screen sizes, not just mobile
- Set SVG height to calc(100vh - 120px) so tree fills available space
- Add overflow:hidden to body to prevent scrolling past viewport
- Remove unnecessary top:20px offset from header
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Move theme toggle from legend to header as "Light Mode"/"Dark Mode"
button visible on both desktop and mobile. Add "Notes" button in
header (desktop only; mobile keeps floating pill). Legend and notes
content now load into a 400px slide-in side panel on desktop, matching
the full-screen mobile overlay. Escape key closes notes panel.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Use position:absolute for theme toggle so title centers naturally
- Reduce search bar padding on mobile for more vertical space
- Add min-height: 60vh on SVG to ensure tree fills viewport
- Desktop layout unchanged
Co-Authored-By: Paperclip <noreply@paperclip.ing>
On mobile (<=768px), the legend, notes, and about sections consumed most
of the viewport, leaving the D3 tree nearly unusable. This moves the
theme toggle into the header as a compact "Light Mode"/"Dark Mode"
button, hides the below-tree content, and adds a floating "Notes"
button that opens all that content in a full-screen overlay panel
(matching the existing tool detail panel pattern). Desktop layout
is completely unchanged.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Clicking a search result now collapses the full tree, expands all
ancestor branches of the matched node, highlights the node with an
accent-colored circle and bold text, and pans the viewport to it.
A small ↗ icon remains in each result for users who want to open the
tool's website directly.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Replace hardcoded px/font values in search area with CSS tokens
(--space-*, --font-size-*, --radius-sm, --font-family, --color-accent)
- Add focus box-shadow on search input using accent color
- Add box-shadow to search results dropdown
- Add @media (max-width: 768px) breakpoints: scale header font,
make legend responsive (position:relative, width:auto)
These changes were present in feat/the-72 but were not carried forward
when THE-66 (search) and THE-73 (badges) merged into master independently.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Both zoomToNode() (pan/zoom, THE-79) and the search/badge additions from
master (THE-66, THE-73) are preserved. No logic changes to either side.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Apply d3.zoom() to SVG container for mouse wheel zoom and drag-to-pan
- Implement zoomToNode() that auto-centers viewport on clicked/expanded node
- Store svgEl reference separately from vis group for zoom target
- Add grab/grabbing cursor CSS on SVG to communicate interactivity
- Preserve compatibility with dark mode, viewBox/responsive SVG, null-child safety
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Reduce #header font-size from 40px to 16px at max-width 768px to
prevent overlap with the D3 tree on narrow screens. Switch .legend
from absolute/fixed-width to relative/auto so it no longer overflows
viewports narrower than 400px.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Parse (T)/(D)/(R)/(M) suffixes from tool names and render them as
colored tspan elements in the SVG tree. Add matching badge pill styles
to the HTML legend so it visually matches the tree indicators.
- T (tool) → blue #4a9eda
- D (dork) → orange #e8944a
- R (registration) → amber #c8a030
- M (manual URL) → purple #9a7eda
Badge colors are theme-invariant; they work on both dark and light
backgrounds without separate light-mode overrides.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Adds a debounced text search input above the D3 tree that filters all
~1,000+ tool nodes by name and description. Results appear as a flat
list with breadcrumb paths; clearing the input hides the panel.
- No build step required: vanilla JS, no new dependencies
- Sanitizes HTML output (escapeHtml/escapeAttr) and validates URLs (http/https only)
- Dark and light mode compatible via existing CSS variables
- Results capped at 50 to keep rendering fast
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Board feedback: dark mode looked blue rather than properly dark.
Changed backgrounds from navy (#1a1a2e, #16213e) to neutral darks
(#1a1a1a, #2d2d2d), node fills to gray (#3a3a3a), and node stroke
to steelblue to match light mode styling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
#767676 on white = 4.54:1, just above the 4.5:1 AA threshold.
#999 (previous value) was 2.85:1, which failed.
Closes THE-37.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Closes THE-34, THE-35, THE-36.
- Replaces all hardcoded colors in arf.css with CSS custom properties
- Dark palette defined on :root (default); light palette on body.light-mode
- Removes old .dark-Mode class; D3 inline styles now read CSS vars at render time
- goDark() toggles light-mode class and persists preference to localStorage
- Flash-prevention inline script in body applies stored theme before first paint
- Toggle button label reflects current theme state
Co-Authored-By: Paperclip <noreply@paperclip.ing>
