Commit Graph

140 Commits

Author SHA1 Message Date
cb87adb249 fix: update all section color references to balanced colors
Update all rgba and hex values for hover/active states:
- CSS: rgba(145, 99, 184), #724a95
- HTML: rgba(212, 90, 160), #b24485
- Tailwind: rgba(26, 175, 184), #0d8f96

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:59:01 +01:00
96b71079d8 style: balance section colors between muted and vibrant
Find middle ground between old muted and badge colors:
- CSS: #9163b8 (balanced purple)
- HTML: #d45aa0 (balanced pink)
- Tailwind: #1aafb8 (balanced teal)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:57:20 +01:00
8513189efe style: update section colors to match completed badge
Use colors from the completed badge gradient:
- CSS: #9b59b6 (purple)
- HTML: #e040fb (pink/magenta)
- Tailwind: #00bcd4 (cyan)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 04:56:32 +01:00
4c56342cb7 feat: add comprehensive analytics tracking and enhance practice links
- Add tracking for: coming_soon_click, external_link, header_nav_click,
  footer_link, practice_link, expected_toggle
- Enhance practice links (.ref-see-also) with gradient background and
  button-like styling to encourage learning
- Simplify reference nav (remove sticky positioning)
2026-01-16 04:38:13 +01:00
0a03d51e63 feat: complete section color coding with logo, hints, editor themes, and footers
- Add section-specific CodeMirror syntax highlighting (purple selectors for CSS)
- Logo now uses section colors (CSS purple as default, changes per section)
- Add section color coding for hints
- Add full footer to section and reference pages
- Fix nav highlight updates for sidebar and prev/next navigation
- Change welcome module mode to CSS for purple theme on first lesson
- Rebrand "Code Crispies" to "CODE CRISPIES" across all translations
- Fix scroll to top on section page navigation
- Change HTML section color to raspberry (#c75b7a)
2026-01-16 04:32:55 +01:00
5ebb007568 fix: balance section colors - more vibrant but still readable 2026-01-16 03:59:34 +01:00
f4cdfa1e57 fix: desaturate section colors for better readability and add section progress bars 2026-01-16 03:58:31 +01:00
0fe618f551 fix: use completed color gradient for progress bar 2026-01-16 03:55:10 +01:00
f2a5156d01 fix: add section color coding for reset code button 2026-01-16 03:54:35 +01:00
848881f243 fix: add section color coding for module pill between nav buttons 2026-01-16 03:53:55 +01:00
03212da9af fix: add section color coding for code blocks on section pages 2026-01-16 03:53:12 +01:00
af74a7024d fix: improve color coding for nav buttons, CodeMirror theme, and prev/next navigation 2026-01-16 03:51:25 +01:00
8790d3c19e feat: implement section-based color coding
- Add CSS variables for section colors (CSS violet, HTML raspberry, Tailwind cyan)
- Set data-section attribute on body based on current route
- Color code header nav links, logo, reference nav, topic links
- Color code CodeMirror editor cursor/selection
- Color code task instruction bubble
- Add reference page footer
- Section pages, lessons, and references all use matching colors
2026-01-16 03:50:01 +01:00
9753c7066c fix: purple-gray Coming Soon badge, raspberry HTML color 2026-01-16 03:40:05 +01:00
410833e91e fix: darken Coming Soon badge background 2026-01-16 03:37:13 +01:00
072b2ad210 feat: add Coming Soon badge to Tailwind section
- Show Coming Soon badge on Tailwind landing card
- Disable Tailwind topic links with Coming Soon badges
- Add i18n translations for Coming Soon in all 6 languages
- Add CSS for disabled states and badge styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 03:36:15 +01:00
1368f1c079 feat: add landing footer with donation support, change license to Unlicense
- Add extended landing footer with module links grouped by section
- Integrate Liberapay donation widget with Umami tracking
- Add support section to help dialog and goodbye lesson
- Change license from MIT to Unlicense (public domain)
- Disable Tailwind section (not yet activated)
- Update German CTA copy
- Update all 6 language translations for license text

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 03:33:41 +01:00
f1496e7232 feat: improve playground UX and fix undo/redo across lessons
- Add dice SVG icon for random template button
- Reset button now restores last loaded template in playground
- Clear editor history when switching lessons (prevents cross-lesson undo)
- Add playground link to goodbye lesson
- Center icon buttons with flexbox

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 02:28:12 +01:00
42c4c5d586 feat: add collapsible reference tables for sections with >5 rows
- Tables with more than 5 rows now show first 5 with 'Show N more...' toggle
- Uses native <details>/<summary> for expand/collapse
- Keeps reference pages cleaner by reducing visual noise from long sections
- Box Model, Typography, Transitions now collapsed by default
2026-01-15 17:42:03 +01:00
85205f836e feat: redesign landing page with SEO enhancements
- Add comprehensive SEO meta tags (Open Graph, Twitter Cards, JSON-LD)
- Restructure landing page with Khan Academy-style "Why It Works" section
- Replace "How It Works" + "Features" with 3 benefit cards:
  - Learn by Doing (code icon)
  - Practice at Your Pace (progress icon)
  - Master Real Skills (tools icon)
- Add "Explore Learning Paths" section with learning tracks
- Implement dynamic meta tag updates for route-based SEO
- Update page title and descriptions based on current route
- Add new CSS styles for benefit cards, learning paths, and enhanced CTA

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 17:26:02 +01:00
79ff72635e fix: add missing --spacing-xl CSS variable for reference section spacing 2026-01-15 16:06:36 +01:00
b04688734d feat: add cross-reference links throughout the website
- Add "See also" links to all 5 reference pages connecting related content
- Add reference links to section content (Selectors, Flexbox, Grid, HTML)
- Add inline links to landing page features section
- Add quick navigation links to help dialog
- Add CSS styling for .ref-see-also, .topic-ref, .section-see-also, .help-nav-links
- Fix spacing between reference sections (add margin-top)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 16:03:18 +01:00
c6f33194e8 feat: add Reference link to main navigation
- Add Reference nav link with subtle separator styling
- Update nav highlight to show active state on reference pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:54:43 +01:00
0340a4d4bc feat: implement reference/cheatsheet pages
- Add reference page container to index.html with tab navigation
- Create comprehensive cheatsheets for CSS properties, selectors,
  flexbox, grid, and HTML elements
- Add showReferencePage function with CodeMirror syntax highlighting
- Add reference_view analytics tracking
- Style reference tables, lists, and navigation with responsive design

Routes: #reference/css, #reference/selectors, #reference/flexbox,
        #reference/grid, #reference/html

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:53:05 +01:00
301200abc2 feat: add CodeMirror syntax highlighting to section page code blocks
- Use CodeMirror in read-only mode for code examples
- Auto-detect CSS vs HTML based on content
- Clean up views when navigating between sections
- Add transparent background to blend with code-block container

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 11:54:50 +01:00
a8410df42a feat: improve section pages with GitBook-style layout and landing page
- Add side-by-side layout for section pages (text left, code right)
- Include educational content with code examples for CSS, HTML, Tailwind
- Add section overviews explaining each technology
- Make header level pill clickable to return to last lesson
- Update landing page with "How It Works" steps and features section
- Improve code block readability with GitHub-dark color scheme
- Add prominent topic links with SEO-friendly accessible text
- Add responsive grid layout that stacks on mobile

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 11:52:26 +01:00
7125b7adc9 feat: add landing pages and section navigation
- Add home landing page with section cards (CSS, HTML, Tailwind)
- Add section landing pages with module grid and progress tracking
- Implement extended URL routing for pages, sections, and lessons
- Create sections.js configuration for module categorization
- Exclude welcome/goodbye modules from progress stats
- Add main navigation links in header (desktop only)
- Update logo click to navigate to home landing

Routes:
- # → Home landing
- #css, #html, #tailwind → Section landing pages
- #module/index → Lesson (unchanged)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 23:15:34 +01:00
0f14568d2c feat: add shareable lesson links with URL routing
- Add share button with SVG link icon in lesson title row
- Create share dialog with copy URL functionality
- Implement URL hash-based routing for lesson navigation
- Support browser back/forward navigation
- Add i18n translations for share dialog in all languages
- Position share button between title and completion badge
- Add RTL support for title row layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 21:35:49 +01:00
a4563638a0 cleanup: remove commented out and duplicate RTL code 2026-01-14 20:25:41 +01:00
aebb3f267b fix(rtl): orientation and direction of elements in the sidebar 2026-01-14 19:17:36 +01:00
96f2ec1970 fix(rtl): sidebar chevron and titles right-aligned using order property 2026-01-14 18:37:04 +01:00
daf5aa1134 fix(rtl): let natural RTL flex flow position burger on right edge 2026-01-14 18:36:20 +01:00
ac83bb2faa fix(rtl): header layout, completion badge spacing, sidebar alignment, list bullets, code blocks 2026-01-14 18:12:24 +01:00
6da748fe66 fix: use native details/summary marker instead of custom chevrons 2026-01-14 17:59:07 +01:00
af2ded5381 fix: use clip-path for sidebar chevrons (better cross-browser support) 2026-01-14 17:56:50 +01:00
468163a2ec fix: header pill shows module name + level, fix RTL checkmark spacing 2026-01-14 17:53:29 +01:00
64caaeb049 feat: add header level pill on desktop, use native details/summary for sidebar
- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation
2026-01-14 17:51:34 +01:00
be9bc7bd2f fix(animation): sync disappear timing (bowl 3s, bubble 2.7s + 0.3s delay) 2026-01-14 17:45:25 +01:00
2d376f4fe2 fix(animation): offset speech bubble timing for bounce effect 2026-01-14 17:27:35 +01:00
22c49ae713 fix(animation): position speech bubble above the bowl 2026-01-14 17:24:45 +01:00
275f2d75c3 fix(animation): speech bubble now animates like bowl with scale 2026-01-14 17:23:53 +01:00
46d8f7d282 feat(animation): proper SVG speech bubble with tail using mask-image 2026-01-14 17:15:49 +01:00
249becc756 feat(animation): speech bubble shape with tail pointing to bowl 2026-01-14 17:03:51 +01:00
5986e83237 fix(animation): bowl size to 50% of wrapper 2026-01-14 17:01:50 +01:00
bfd2d6943f fix(animation): responsive bowl size - min 200px or 1/3 wrapper width 2026-01-14 17:01:21 +01:00
4643477bf5 fix(animation): center bowl peek horizontally 2026-01-14 16:59:39 +01:00
f7b4962255 fix(animation): simplify text scale to 4 smooth keyframes 2026-01-14 15:53:19 +01:00
7fa67daac8 fix(animation): more dramatic text scale on entrance 2026-01-14 15:51:05 +01:00
1d0c2426dc fix(animation): sync bowl peek timing with text animation 2026-01-14 15:50:29 +01:00
cc1b972132 fix(animation): smoother bowl peek with gentle settle motion 2026-01-14 15:49:46 +01:00