📱 Fix responsive website UI

[StarDust130]

What this PR does

📱✨ Improves the mobile website experience with a cleaner, more responsive, and easier-to-use interface.

Changes include:

• 🚀 Improved mobile navigation
• 🎨 Better spacing and visual hierarchy on the home page
• 📚 Cleaner lesson page layout
• ⚡ Enhanced phase modal design and lesson rows
• 👆 Larger touch-friendly interactions for mobile users

Kind of change

• New lesson
• Fix to an existing lesson
• Translation
• New output (prompt, skill, agent, MCP server)
• Docs / website / tooling

Checklist

• Code runs without errors with the listed dependencies
• No comments in code files (docs explain, code is self-explanatory)
• Built from scratch first, then shown with a framework (for new lessons)
• Lesson folder matches LESSON_TEMPLATE.md structure
• ROADMAP.md row for the lesson is a markdown link ([Name](phases/...)), not bare text
• One lesson per commit (atomic per-lesson rule)
• Tested locally / code output matches what docs/en.md claims

Phase / lesson

🌐 Website UI

Notes for reviewer

Focused on improving the mobile experience:

• 📱 Cleaner navigation menu
• ✨ Better spacing and readability
• 🎯 Improved lesson page structure
• 🚀 More responsive layouts
• 👆 Easier tapping and interaction on smaller screens
• 🎨 Better-looking phase modal and lesson list

Thank you for creating and maintaining this project. It has been incredibly helpful for learning AI engineering, and I’m grateful to contribute back to the community. ❤️

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6b482119-cbca-4efb-8c9b-4b3c51f553e5

📥 Commits

Reviewing files that changed from the base of the PR and between 8998cab and fd5fa66.

📒 Files selected for processing (1)

• site/lesson.html

🚧 Files skipped from review as they are similar to previous changes (1)

• site/lesson.html

---

📝 Walkthrough

Walkthrough

Adds @media (max-width: 600px) breakpoints to site/style.css and site/index.html, refines existing responsive breakpoints (900px, 768px, 480px) in site/lesson.html and site/index.html, updates the lesson sidebar toggle button markup with visible text, and adjusts the click-to-close logic for mobile sidebar interaction.

Changes

Mobile Responsive Layout

Layer / File(s)	Summary
Global header and modal mobile sheet site/style.css	New @media (max-width: 600px) block: compresses the header and hides the GitHub nav button; converts the modal overlay to a bottom-aligned sheet with adjusted sizing, close button styling, and typography; reworks the modal lessons list into a three-column grid with per-element placement and Mark/Done toggle labels via ::after; switches the modal footer to a vertical stack.
Homepage 600px and 480px breakpoints site/index.html	New @media (max-width: 600px) block adds overflow hiding, consistent section padding, and reflows the masthead CTA grid, stat rows, and toc rows. Existing @media (max-width: 480px) block is refined: adjusts manual-title sizing/line-height, updates tagline and attribution typography, forces ascii-rule margins with !important, removes the drop-cap first-letter styling, and changes toc-row grid columns and gap.
Lesson page breakpoints, toggle markup, and click logic site/lesson.html	900px breakpoint gains overflow-x restriction, repositions and resizes the sidebar toggle, and switches the sidebar to off-canvas transform layout. 768px block adjusts heading/paragraph typography and AI panel sizing. 480px block tightens main/panel padding, refines toggle placement, and converts code/output action buttons to a stacked full-width single-column grid. The sidebar toggle button is updated to include visible "Lessons" text with two inner <span> elements and a new aria-label. Click-to-close behavior is adjusted to use toggle.contains(e.target) instead of direct target equality, preventing sidebar closure when clicking toggle descendants.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix responsive website UI' directly and specifically describes the main change across all modified files, clearly summarizing the primary focus on mobile responsiveness improvements.
Description check	✅ Passed	The description is directly related to the changeset, detailing mobile UI improvements including navigation, spacing, lesson layouts, and modal design that align with the actual file changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

site/lesson.html (1)

1951-1954: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Fix outside-click detection for the new labeled sidebar toggle.

After adding child <span> elements to #sidebarToggle, clicks on those children make e.target !== toggle true, so the sidebar can close immediately right after opening. Use a containment check on the toggle instead of strict equality.

Proposed fix

-          if (window.innerWidth <= 900 && sidebar.classList.contains('open')) {
-            if (!sidebar.contains(e.target) && e.target !== toggle) {
+          if (window.innerWidth <= 900 && sidebar.classList.contains('open')) {
+            if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
               sidebar.classList.remove('open');
             }
           }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@site/lesson.html` around lines 1951 - 1954, The click detection logic for
closing the sidebar uses a strict equality check on the toggle button (e.target
!== toggle), which fails when child span elements are added to the toggle
because clicking those children makes e.target point to the child instead of the
parent toggle element. Replace the strict equality check with a containment
check by using !toggle.contains(e.target) instead of e.target !== toggle to
properly detect clicks on the toggle button and all of its child elements.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@site/lesson.html`:
- Around line 1951-1954: The click detection logic for closing the sidebar uses
a strict equality check on the toggle button (e.target !== toggle), which fails
when child span elements are added to the toggle because clicking those children
makes e.target point to the child instead of the parent toggle element. Replace
the strict equality check with a containment check by using
!toggle.contains(e.target) instead of e.target !== toggle to properly detect
clicks on the toggle button and all of its child elements.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dbd71e95-a7df-410c-951c-83256eb97bd8

📥 Commits

Reviewing files that changed from the base of the PR and between 574a5d6 and 8998cab.

📒 Files selected for processing (3)

• site/index.html
• site/lesson.html
• site/style.css