From fb509b7b06d6f6b3435bd7c5e55016a8074dcae2 Mon Sep 17 00:00:00 2001 From: IlyaZar Date: Thu, 5 Feb 2026 22:06:59 +0100 Subject: [PATCH] feat: add top navigation bar for better discoverability Add a thin, unobtrusive navigation bar at the top of the page with links to About, Docs, Submit, Status, and GitHub. This helps new users discover important onboarding information without scrolling to the footer. - New: _includes/site-nav.njk partial - New: static/style/site-nav.css styling - Modified: layout.njk to include site-nav - Modified: styles.css to import site-nav.css --- _includes/layout.njk | 1 + _includes/site-nav.njk | 15 ++++++++++ static/style/site-nav.css | 62 +++++++++++++++++++++++++++++++++++++++ static/styles.css | 1 + 4 files changed, 79 insertions(+) create mode 100644 _includes/site-nav.njk create mode 100644 static/style/site-nav.css diff --git a/_includes/layout.njk b/_includes/layout.njk index bde888d8d..5d91b02ee 100644 --- a/_includes/layout.njk +++ b/_includes/layout.njk @@ -4,6 +4,7 @@ {% include "header.njk" %} + {% include "site-nav.njk" %} {% include "templates.njk" %}
diff --git a/_includes/site-nav.njk b/_includes/site-nav.njk new file mode 100644 index 000000000..1a53942a1 --- /dev/null +++ b/_includes/site-nav.njk @@ -0,0 +1,15 @@ +{% import "util/macros.njk" as util %} + + diff --git a/static/style/site-nav.css b/static/style/site-nav.css new file mode 100644 index 000000000..9565d5e12 --- /dev/null +++ b/static/style/site-nav.css @@ -0,0 +1,62 @@ +/* Thin secondary navigation bar below the header */ +.site-nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: var(--max-content); + margin: -13px auto 16px auto; + padding: 3px var(--side-padding); + font-size: 16px; + color: var(--foreground-3); + border-top: 1px solid var(--background-4); + + a { + color: inherit; + transition: color 0.1s ease-in-out; + + &:hover { + color: var(--foreground-1); + } + } +} + +/* On homepage (header has h1), pull nav closer to tagline */ +header:has(h1) + .site-nav { + margin: -48px auto 51px auto; +} + +.site-nav-links { + display: flex; + gap: 1.5em; +} + +.site-nav-meta { + display: flex; + align-items: center; + gap: 1em; +} + +.site-nav-github { + display: flex; + align-items: center; + + svg { + width: 16px; + height: 16px; + } +} + +/* On very narrow screens, hide less essential links */ +@media (max-width: 400px) { + .site-nav { + font-size: 14px; + } + + .site-nav-links { + gap: 1em; + } + + .site-nav-meta { + gap: 0.75em; + } +} diff --git a/static/styles.css b/static/styles.css index 18a3959b1..6b744a195 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,6 +1,7 @@ @import url('style/typography.css'); @import url('style/colors.css'); @import url('style/buttons.css'); +@import url('style/site-nav.css'); @import url('style/header.css'); @import url('style/footer.css'); @import url('style/grid.css');