refactor: redesign layout to Flexbox Froggy style with slide-out sidebar

Browse Source

- Implement 50/50 split layout (left: instructions + editor, right: preview)
- Replace always-visible sidebar with slide-out drawer menu
- Move footer, progress, and settings into sidebar
- Add toggleable expected result overlay (hidden by default)
- Create new hint system with step progress indicators
- Add ghost button styles for modal and text button for sidebar reset
- Fix HTML lesson task instruction and typo ("important" not "importing")
- Add padding to preview frames to prevent corner clipping
- Optimize layout for iPadOS and tablet devices

...

This commit is contained in:

Michael Czechowski

2025-12-21 23:20:07 +01:00

parent b13c8ffea5

commit b5cf77376f

4 changed files with 965 additions and 1216 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

1444

src/main.css

File diff suppressed because it is too large Load Diff