bc2a58903f
SUMMARY: Enhanced interactive diagram with clickable central core explaining how all 6 services work together, plus improved side-by-side layout for better desktop UX. CHANGES: 1. Clickable Central Core (SVG): - Added service-node class and data-service="overview" to central core - Added cursor pointer and title for accessibility - Users can now click the "T" to see overall governance explanation 2. Overview Service Data (JavaScript): - Added 'overview' to serviceData with comprehensive description - Explains how all 6 services work together as a system - 6 key details about coordinated governance - Promise: External architectural enforcement 3. Improved Desktop Layout (HTML): - Scaled down diagram from max-w-2xl to max-w-md/lg - Changed to flex layout (lg:flex-row) for side-by-side on desktop - Panel now appears next to diagram on large screens - Stacks vertically on mobile (flex-col) - Updated tip text to highlight central core clickability 4. Panel Positioning (JavaScript): - Panel inserts into flex container instead of diagram-container - Added flex-1 class for proper flex behavior - lg:min-w-[400px] ensures readable width on desktop - Maintains mobile-first responsive design DESKTOP UX: - Diagram on left (max-w-lg = 512px) - Service details on right (flex-1, grows to fill space) - Both visible simultaneously on screens ≥1024px MOBILE UX: - Diagram full width (max-w-md = 448px, centered) - Service details below diagram (full width) - Maintains vertical flow on small screens IMPACT: Users can now: ✓ Click central "T" to understand overall governance ✓ See diagram and service details side-by-side (desktop) ✓ Better understand how 6 services coordinate together 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| code-copy-button.js | ||
| coming-soon-overlay.js | ||
| currency-selector.js | ||
| document-cards.js | ||
| document-viewer.js | ||
| footer.js | ||
| interactive-diagram.js | ||
| language-selector.js | ||
| navbar.js | ||
| toc.js | ||