diff --git a/config.toml b/config.toml index de46b97..699f05e 100644 --- a/config.toml +++ b/config.toml @@ -179,6 +179,8 @@ csp = [ # debug_no_styles = true [extra.nav] +# Whether to automatically hide nav when not hovered or focused +auto_hide = true # Whether to show the Atom/RSS feed button in the nav show_feed = true # Whether to show the manual theme switcher in the nav diff --git a/sass/_article.scss b/sass/_article.scss index 5102ad4..b00121b 100644 --- a/sass/_article.scss +++ b/sass/_article.scss @@ -22,6 +22,13 @@ & + #heading { margin-block-start: calc(50vw - 8.75rem); } + + @media only screen and (max-width: 480px) { + body:has(&) #site-nav:not(#handle + #site-nav) { + margin-block-start: calc(50vw + 1rem); + } + } + } #heading { diff --git a/sass/_nav.scss b/sass/_nav.scss index 2baaa88..f32b59f 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -35,30 +35,43 @@ transform: none; opacity: 1; } + + & + #site-nav { + position: fixed; + transform: translateY(-1rem) scale(0.5); + transform-origin: top; + opacity: 0; + transition: var(--transition); + margin: 0 auto; + width: max-content; + + nav { + pointer-events: none; + } + + &:hover, + &:has(*:focus-visible, *:focus) { + transform: none; + opacity: 1; + + nav { + pointer-events: all; + } + } + } } #site-nav { - position: fixed; + position: sticky; left: 50%; - transform: translateY(-1rem) scale(0.5); - transform-origin: top; - opacity: 0; z-index: 999; - transition: var(--transition); - margin: 0 auto; + margin: 1rem auto 0; inset-block-start: 1rem; inset-inline-end: 0; inset-inline-start: 0; border-radius: 1.625rem; - width: max-content; max-width: min(var(--container-width), 90%); - &:hover, - &:has(*:focus-visible, *:focus) { - transform: none; - opacity: 1; - } - &::before { -webkit-backdrop-filter: var(--blur); position: absolute; diff --git a/templates/partials/nav.html b/templates/partials/nav.html index b988bd6..3c9f2b3 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -1,6 +1,8 @@ {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%} -
+{%- if config.extra.nav.auto_hide %} +
+{%- endif %}