Styling

SCSS Styling System - Implementation Complete ✅ Status: Production Ready Date: May 1, 2024 Implementation Phase: Styling Foundation & Integration Overview Successfully implemented a modular, scalable SCSS styling system for Anki flashcards with: 80+ CSS variables for consistent design tokens across all courses Reusable base components shared by all courses Course-specific styling for Psychology and DevOps (foundation for 50+ courses) Compiled CSS automatically injected into APKG files Zero breaking changes to existing infrastructure Architecture File Structure scripts/anki/styles/ ├── _variables.scss # Global design tokens (colors, spacing, typography) ├── _base-components.scss # Reusable CSS classes for all card types ├── courses/ │ ├── psychology.scss # Psychology-specific color overrides │ └── devops.scss # DevOps-specific styling ├── psychology.css # Compiled output (16 KB) └── devops.css # Compiled output (17 KB) Design Flow User Card Data (JSON) ↓ metadata['course'] = 'psychology' ↓ APKGGenerator creates models ↓ _get_css('psychology') ↓ Load: scripts/anki/styles/psychology.css ↓ Inject CSS into Anki models ↓ Generate APKG with styled cards Component Breakdown 1. Global Variables (_variables.scss) Color Palette: