From bbd7f33640e81dd9229098d6683f7363a8fb465b Mon Sep 17 00:00:00 2001
From: "Jeffrey N." <fuishpo@protonmail.com>
Date: Tue, 31 Dec 2024 00:54:46 -0500
Subject: [PATCH 1/2] Make .book-header sticky. Display headings below
 .book-header.

---
 assets/_main.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/assets/_main.scss b/assets/_main.scss
index 7b9e1af..13eac4d 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -298,9 +298,16 @@ body[dir="rtl"] .book-menu {
 }
 
 @media screen and (max-width: $mobile-breakpoint) {
+  h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: 3rem;
+  }
+
   #menu-control,
   #toc-control {
     display: inline;
+    // prevents scrolling to top when inputs focused
+    position: fixed;
+    top: 0;
   }
 
   .book-menu {
@@ -314,7 +321,16 @@ body[dir="rtl"] .book-menu {
   }
 
   .book-header {
+    background: var(--body-background);
+    border-bottom: 2px solid var(--color-visited-link);
     display: block;
+    max-height: 100vh;
+    overflow: auto;
+    padding: .35rem 0;
+    position: sticky;
+    top: -1px;
+    // prevent background from being transparent
+    z-index: 1;
   }
 
   #menu-control:focus ~ main label[for="menu-control"] {

From 01b52eaa956b2e376139acd51f903fc2d13dfcde Mon Sep 17 00:00:00 2001
From: "Jeffrey N." <fuishpo@protonmail.com>
Date: Tue, 31 Dec 2024 00:55:30 -0500
Subject: [PATCH 2/2] UX Improvements: Close TOC when navigating.

---
 assets/book-header.js        | 18 ++++++++++++++++++
 layouts/_default/baseof.html |  7 +++++++
 2 files changed, 25 insertions(+)
 create mode 100644 assets/book-header.js

diff --git a/assets/book-header.js b/assets/book-header.js
new file mode 100644
index 0000000..fd3eee5
--- /dev/null
+++ b/assets/book-header.js
@@ -0,0 +1,18 @@
+(function () {
+  let tocLinks = document.querySelectorAll("#TableOfContents li");
+  let tocInput = document.getElementById("toc-control");
+  tocLinks.forEach(l =>
+    l.addEventListener("click",
+      () => tocInput.checked = false));
+})();
+(function () {
+  let menuLabel = document.querySelector("label[for='menu-control']");
+  let menuInput = document.getElementById("menu-control");
+  let tocInput = document.getElementById("toc-control");
+  menuLabel.addEventListener("click",
+    function () {
+      if (!menuInput.checked) {
+        tocInput.checked = false;
+      }
+    });
+})();
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a6c4c07..15f8390 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -21,6 +21,13 @@
 
       {{ partial "docs/inject/content-before" . }}
       {{ template "main" . }} <!-- Page Content -->
+
+      <!-- Improve .book-header usability on mobile devices -->
+      {{ $script := resources.Get "book-header.js" | resources.Minify }}
+      {{ with $script.Content }}
+        <script>{{ . | safeJS }}</script>
+      {{ end }}
+
       {{ partial "docs/inject/content-after" . }}
 
       <footer class="book-footer">