Skip to content

feat: add font scale widget for reader-adjustable text sizing#31

Open
thisisavs wants to merge 1 commit intonicobailon:mainfrom
thisisavs:feat/font-scale-widget
Open

feat: add font scale widget for reader-adjustable text sizing#31
thisisavs wants to merge 1 commit intonicobailon:mainfrom
thisisavs:feat/font-scale-widget

Conversation

@thisisavs
Copy link

Summary

  • Adds a font scale widget as a required component on every visual-explainer page
  • Fixed-position control (bottom-right) with 4 size presets: Compact (0.9x), Default (1x), Large (1.12x), Extra Large (1.25x)
  • User preference persists in localStorage across page refreshes
  • Includes full implementation reference (HTML, CSS, JS) in SKILL.md
  • Documents the rem unit requirement so all text scales proportionally

Motivation

Visual explainer pages are information-dense and viewed on a wide range of screens -- from laptops to large monitors to projected displays. Browser zoom works but scales everything including layout. This widget scales only text, preserving the page layout while letting readers pick a comfortable reading size.

It also improves accessibility for users who prefer larger text without requiring them to change system or browser settings.

What changed

plugins/visual-explainer/SKILL.md -- added a new ## Font Scale Widget section (82 lines) between the Style/Deliver sections and Diagram Types, containing:

  • Description of the 4 presets and how they work
  • Complete HTML, CSS, and JS snippets for agents to copy
  • Guidance on using rem units for compatibility
  • Note on using page accent colors for the active state

No changes to templates, references, or other files.

Preview

The widget renders as a small A A A A button cluster in the bottom-right corner, styled with the page's own theme variables (--surface, --border-bright, --accent-dim). Each "A" is progressively larger to visually communicate the scale.

Generated with Claude Code

Adds a fixed-position font scale widget (bottom-right corner) with 4
size presets (Compact 0.9x, Default 1x, Large 1.12x, XL 1.25x) that
every visual-explainer page should include.

The widget scales the root font-size, so all text must use rem units to
scale proportionally. User preference persists via localStorage across
page refreshes.

This improves accessibility and accommodates different screen sizes and
reading preferences without requiring the user to use browser zoom.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant