public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

feat: add cross-reference links throughout the website

Browse Source 
- 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:
Michael Czechowski
2026-01-15 16:03:18 +01:00
parent c6f33194e8
commit b04688734d
3 changed files with 95 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/main.css
View File

@@ -1394,6 +1394,25 @@ input:checked + .toggle-slider::before {
border: 1px solid var(--border-color);
}
.help-nav-links {
font-size: 0.9rem;
color: var(--light-text);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-color);
border-radius: var(--border-radius-sm);
margin-top: var(--spacing-sm);
}
.help-nav-links a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.help-nav-links a:hover {
text-decoration: underline;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
@@ -1894,6 +1913,36 @@ input:checked + .toggle-slider::before {
transform: translateX(3px);
}
/* Secondary reference link in topic sections */
.topic-ref {
display: block;
margin-top: 0.75rem;
color: var(--light-text);
font-size: 0.9rem;
text-decoration: none;
}
.topic-ref:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* See-also in section overviews */
.section-see-also {
margin-top: var(--spacing-md);
font-size: 0.9rem;
color: var(--light-text);
}
.section-see-also a {
color: var(--primary-color);
text-decoration: none;
}
.section-see-also a:hover {
text-decoration: underline;
}
/* Inline code in topic text */
.topic-text code {
background: var(--primary-bg-light);
@@ -2065,9 +2114,14 @@ input:checked + .toggle-slider::before {
}
.ref-section {
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.ref-section:first-of-type {
margin-top: 0;
}
.ref-section h2 {
font-size: 1.2rem;
margin-bottom: var(--spacing-md);
@@ -2142,6 +2196,25 @@ input:checked + .toggle-slider::before {
margin: var(--spacing-md) 0;
}
/* Cross-reference links in reference pages */
.ref-see-also {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-color);
font-size: 0.9rem;
color: var(--light-text);
}
.ref-see-also a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.ref-see-also a:hover {
text-decoration: underline;
}
/* Responsive reference tables */
@media (max-width: 600px) {
.ref-table {