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');