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)
This commit is contained in:
2026-01-15 16:03:18 +01:00
parent c6f33194e8
commit b04688734d
3 changed files with 95 additions and 2 deletions

View File

@@ -103,8 +103,9 @@
<div class="feature-text">
<h3>Practical Focus</h3>
<p>
Every exercise teaches skills you'll use in real projects—flexbox layouts, form styling, responsive design, and
modern CSS techniques.
Every exercise teaches skills you'll use in real projects—<a href="#reference/flexbox">flexbox layouts</a>,
<a href="#html-forms-basic/0">form styling</a>, <a href="#responsive-design/0">responsive design</a>, and modern
CSS techniques.
</p>
</div>
</div>
@@ -307,6 +308,10 @@
<li data-i18n-html="modeTailwind"><strong>Tailwind</strong> - Apply utility classes directly in HTML</li>
<li data-i18n-html="modeHtml"><strong>HTML</strong> - Practice semantic markup and native elements</li>
</ul>
<p class="help-nav-links">
Jump to: <a href="#css">CSS</a> | <a href="#html">HTML</a> | <a href="#tailwind">Tailwind</a> |
<a href="#reference/css">Reference</a>
</p>
<h4 data-i18n="gettingStartedTitle">Getting Started</h4>
<p data-i18n="gettingStartedText">