Make auto-hide optional

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

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 {

sass/_nav.scss

@@ -35,29 +35,42 @@
 		transform: none;
 		opacity: 1;
 	}
-}
 
-#site-nav {
+	& + #site-nav {
 		position: fixed;
-	left: 50%;
 		transform: translateY(-1rem) scale(0.5);
 		transform-origin: top;
 		opacity: 0;
-	z-index: 999;
 		transition: var(--transition);
 		margin: 0 auto;
-	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%);
+
+		nav {
+			pointer-events: none;
+		}
 
 		&:hover,
 		&:has(*:focus-visible, *:focus) {
 			transform: none;
 			opacity: 1;
+
+			nav {
+				pointer-events: all;
 			}
+		}
+	}
+}
+
+#site-nav {
+	position: sticky;
+	left: 50%;
+	z-index: 999;
+	margin: 1rem auto 0;
+	inset-block-start: 1rem;
+	inset-inline-end: 0;
+	inset-inline-start: 0;
+	border-radius: 1.625rem;
+	max-width: min(var(--container-width), 90%);
 
 	&::before {
 		-webkit-backdrop-filter: var(--blur);

templates/partials/nav.html

@@ -1,6 +1,8 @@
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
 
-<div id="handle"></div>
+{%- if config.extra.nav.auto_hide %}
+	<div id="handle"></div>
+{%- endif %}
 <header id="site-nav">
 	<nav>
 		<a href="#main" id="main-content" tabindex="0">