Commit Graph

126 Commits

Author SHA1 Message Date
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
047de757f7 fix(animation): move bowl inside preview-frame with overflow hidden 2026-01-14 15:48:53 +01:00
ef8bbe7730 fix(animation): move bowl to preview-wrapper and increase size 2026-01-14 15:47:40 +01:00
1613175112 feat(animation): add bowl smiley peek animation on success
Bowl mascot now peeks up from bottom right corner when a lesson
is completed, synced with the existing "Crispyyyyyy!" animation.
2026-01-14 15:44:58 +01:00
9d786b5cf4 feat: enhance success animation with scale, random quotes, and persistent border
- Add scale transition (50% → 100%) to crispy badge animation
- Rotate through random encouraging quotes on completion
- Keep gradient border visible after completing a lesson
- Match completion badge gradient colors to glow effect
- Improve bounce animation with elastic bezier curve
2026-01-14 03:13:44 +01:00
2cd94caafb feat: reorder learning path for design students and improve animations
Learning path changes:
- Reorder modules: CSS visual (selectors, colors, typography) first,
  then layout (flexbox, grid), then HTML structure last
- Add intro lessons on CSS property syntax before selectors
- Add Figure module (images with captions)
- Remove Progress/Meter module (too niche)
- Reduce Tables from 3 to 1 lesson
- Reduce Form Validation from 3 to 1 lesson
- Rename "CSS Selectors" module to "CSS Basics"

Animation improvements:
- Change success text to "Your CODE looks CRISPY!"
- Increase animation duration to 3s
- Fix Firefox glow: use linear-gradient pulse instead of conic rotation
- Fix expected result toggle: match padding to prevent layout jump

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-14 01:30:19 +01:00
2a96ba9d00 feat: bigger border (6px), colorful conic glow, reduced padding
- Border increased from 4px to 6px
- Glow layer uses same conic-gradient with 20px blur
- Reduced preview-frame padding to compensate
- Higher glow opacity (0.8) for more vibrant effect
2026-01-13 21:29:19 +01:00
8b3b9ddde5 fix: thicker border (4px) and add transparent border by default
- preview-wrapper now has 4px transparent border by default
- No layout jump when animation activates
- Larger glow layer for better effect
2026-01-13 21:27:59 +01:00
1ec3f34eac feat: implement rotating gradient border using @property technique
Based on https://codetv.dev/blog/animated-css-gradient-border
- Uses @property for smooth angle interpolation
- Two backgrounds: padding-box + border-box approach
- Blurred glow layer synced with border rotation
- Works in Chrome, Safari, Edge (not Firefox)
2026-01-13 21:26:18 +01:00
83e6c12b9a fix: simplify rotating border with proper z-index and drop-shadow glow 2026-01-13 21:23:04 +01:00
1507bfc8eb fix: make gradient rotate anti-clockwise around border
Use transform: rotate(-360deg) to physically spin the conic-gradient
around the preview border. Two layers:
- Blurred glow layer (z-index: -2)
- Crisp border using mask-composite (z-index: -1)

The gradient colors (purple/magenta/cyan/violet) now visually travel
anti-clockwise around the border like Gemini's UI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-13 21:17:52 +01:00
532faecc0a fix: use box-shadow animation for cross-browser compatibility
Previous implementation used CSS @property which isn't supported in
Firefox. New approach uses animated box-shadow with three layers:
- 3px solid border cycling through colors
- 15px inner glow
- 30px outer glow

Colors cycle: purple → magenta → cyan → violet → purple, then fade out.
Works in all modern browsers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-13 21:15:50 +01:00
1d299eac43 feat: replace completion animation with Gemini-style rotating gradient glow
- Remove bouncing "CRISPY" text animation (dvd-bounce)
- Add rotating conic-gradient border with glow effect
- Colors: purple (#9b59b6), magenta (#e040fb), cyan (#00bcd4), violet (#7c4dff)
- Animation plays once (2.5s) then fades out so students can continue
- Update success colors from green to purple theme:
  - success-color: #9b6dd4
  - success-color-dark: #7c4dff
  - success-color-light: #c9b8e8
- Uses CSS @property for animating conic-gradient angle
- Two layers: blurred glow + crisp border using mask-composite

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-13 21:13:54 +01:00
fb33930328 feat: restructure learning path with new modules and enhanced explanations
- Add CSS Colors, Typography, Advanced Selectors, and Grid modules
- Remove deprecated HTML Marquee module from all languages
- Remove redundant div & span lesson from HTML Block & Inline
- Move SVG module from HTML to CSS section
- Enhance first lessons with comprehensive explanations:
  - Flexbox: historical context, axes concept
  - Colors: named colors, background-color explained
  - Grid: comparison to Flexbox, key properties
- Swap header logo highlight (CRISPIES instead of CODE)
- Use English fallbacks for new modules in non-EN languages
- Fix test to include 'playground' mode

New path: 19 modules (~78 lessons) vs previous 16 modules (62 lessons)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-13 20:32:45 +01:00
fbe0f20ef7 feat: add reset code confirmation dialog with skip option
- Add dialog to confirm resetting code to initial state
- Allow users to skip confirmation with "don't show again" checkbox
- Save preference to user settings
- Improve i18n and CodeEditor components
2026-01-07 14:16:45 +01:00