fix(website): reduce nav links on mobile to prevent overflow

- At 768px: hide Architecture and Screenshots links
- At 480px: show only Docs, Blog, and Get Started CTA

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-15 18:35:27 -05:00
parent facfbf0969
commit 562bfdaf82

View File

@@ -1722,7 +1722,7 @@ ul, ol {
padding: 24px; padding: 24px;
} }
/* Nav links */ /* Nav links — hide Architecture and Screenshots on tablet */
.nav-links { .nav-links {
gap: 16px; gap: 16px;
} }
@@ -1731,6 +1731,11 @@ ul, ol {
font-size: 13px; font-size: 13px;
} }
.nav-link[href*="architecture"],
.nav-link[href*="screenshots"] {
display: none;
}
/* Footer */ /* Footer */
.footer-inner { .footer-inner {
flex-direction: column; flex-direction: column;
@@ -1812,11 +1817,16 @@ ul, ol {
padding-top: 24px; padding-top: 24px;
} }
/* Nav hide on very small */ /* Nav on very small screens keep only Docs, Blog, and CTA */
.nav-links .nav-link:not(.nav-link--active):not(:first-child):not(:last-child) { .nav-links .nav-link {
display: none; display: none;
} }
.nav-links .nav-link[href*="docs"],
.nav-links .nav-link[href*="blog"] {
display: inline;
}
.nav-links { .nav-links {
gap: 12px; gap: 12px;
} }