Commit Graph

238 Commits

Author SHA1 Message Date
d5cf502ca1 fix: add missing --spacing-xl CSS variable for reference section spacing 2026-01-15 16:06:36 +01:00
16ba62fe84 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
50d458c1d1 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
635c3112de 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
a862e29674 feat: add Umami analytics tracking
- Add Umami v2.13.2 script to index.html
- Track key events: lesson_complete, module_start, section_view,
  language_change, playground_template, reset_progress

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 15:45:03 +01:00
c2dcd08ea4 fix: clear completed status when resetting a lesson
- Remove completion badge and reset Run button text in resetSuccessIndicators()
- Remove lesson from completed array in LessonEngine.reset()
- Update sidebar to remove completed class from lesson item
- Update progress display after reset

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:37:50 +01:00
7687360bb4 fix: handle playground mode as HTML mode in preview rendering
Playground mode was falling through to the CSS branch, wrapping user code
in a <style> tag. This prevented HTML elements and font styles from rendering
correctly. Now playground mode is treated like HTML mode, allowing templates
with <style> blocks and HTML content to work properly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:26:44 +01:00
b9a4ff2118 fix: improve playground templates layout and typography
- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:21:43 +01:00
1ec3576fe6 feat: add random template button to playground
- Create 10 boilerplate templates (cards, nav, forms, animations, etc.)
- Add dice button (🎲) visible only in playground mode
- Load random template and apply to preview on click
- Templates include: Card, Navigation, Profile, Buttons, Pricing,
  Form, Features Grid, Badges, CSS Animation, Flexbox Layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:10:17 +01:00
8887932e2c refactor: simplify onboarding/offboarding and move playground to end
- Reduce welcome module from 3 lessons to 1 concise intro
- Reduce goodbye module from 3 lessons to 1 concise outro
- Create standalone playground module at end of module list
- Update all translated welcome files (de, pl, es, ar, uk)
- Playground now appears after goodbye, less prominent

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-15 12:02:58 +01:00
28bd246c73 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
282580a40a 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
9c8b6a9922 fix: move main nav to header-actions (right side) 2026-01-14 23:21:39 +01:00
165ed3d73f 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
5083032735 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
ede3e56a5a cleanup: remove commented out and duplicate RTL code 2026-01-14 20:25:41 +01:00
0595b2b718 replace: remove hex complete message due to not so funny and replace with +1 2026-01-14 19:20:37 +01:00
53003888f1 fix(rtl): orientation and direction of elements in the sidebar 2026-01-14 19:17:36 +01:00
bb96aa1d81 fix(rtl): sidebar chevron and titles right-aligned using order property 2026-01-14 18:37:04 +01:00
1928cda18d fix(rtl): let natural RTL flex flow position burger on right edge 2026-01-14 18:36:20 +01:00
37a15d3ce0 fix(rtl): header layout, completion badge spacing, sidebar alignment, list bullets, code blocks 2026-01-14 18:12:24 +01:00
df2c8ca6f4 fix: use native details/summary marker instead of custom chevrons 2026-01-14 17:59:07 +01:00
3f88bec31a fix: use clip-path for sidebar chevrons (better cross-browser support) 2026-01-14 17:56:50 +01:00
e53233b08c fix: header pill shows module name + level, fix RTL checkmark spacing 2026-01-14 17:53:29 +01:00
72362de88b 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
954f82b27c fix(animation): sync disappear timing (bowl 3s, bubble 2.7s + 0.3s delay) 2026-01-14 17:45:25 +01:00
7e9d49cead fix(animation): offset speech bubble timing for bounce effect 2026-01-14 17:27:35 +01:00
036ddc1071 fix: change +1 message from binary to hex (0x2B 0x31) 2026-01-14 17:26:20 +01:00
0494e4fe37 fix(animation): position speech bubble above the bowl 2026-01-14 17:24:45 +01:00
fee0e728dc fix(animation): speech bubble now animates like bowl with scale 2026-01-14 17:23:53 +01:00
033d6f51fc feat(animation): proper SVG speech bubble with tail using mask-image 2026-01-14 17:15:49 +01:00
c45c9c6682 feat(animation): speech bubble shape with tail pointing to bowl 2026-01-14 17:03:51 +01:00
1107885a7a fix(animation): bowl size to 50% of wrapper 2026-01-14 17:01:50 +01:00
3f1bd46deb fix(animation): responsive bowl size - min 200px or 1/3 wrapper width 2026-01-14 17:01:21 +01:00
95fa884471 fix(animation): center bowl peek horizontally 2026-01-14 16:59:39 +01:00
81b1e18a36 fix(animation): simplify text scale to 4 smooth keyframes 2026-01-14 15:53:19 +01:00
649180b7ec fix(animation): more dramatic text scale on entrance 2026-01-14 15:51:05 +01:00
637236c31b fix(animation): sync bowl peek timing with text animation 2026-01-14 15:50:29 +01:00
cd587ec30b fix(animation): smoother bowl peek with gentle settle motion 2026-01-14 15:49:46 +01:00
3c187ca28e fix(animation): move bowl inside preview-frame with overflow hidden 2026-01-14 15:48:53 +01:00
67db0b9ac5 fix(animation): move bowl to preview-wrapper and increase size 2026-01-14 15:47:40 +01:00
f830cf9a70 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
79e07cdd47 fix: clear animation timeout on navigation to prevent border flash 2026-01-14 11:40:29 +01:00
3bb62ef1fd refactor: keep only +1 ASCII binary quote 2026-01-14 03:18:49 +01:00
637748ddc4 feat: add binary-themed quotes (00000001, 0b00000001, +1 in ASCII) 2026-01-14 03:17:40 +01:00
c881a7ecf6 fix: sync gradient border with completion badge state 2026-01-14 03:14:10 +01:00
4cafcb584e 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
f6c7cca63f 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
c397397c54 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
4d0f511814 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