Add mobile section navigation

AGENTS.md

@@ -20,5 +20,6 @@
 
 - `Delvehold/` contains the published Markdown source.
 - `site/` contains only Delvehold-specific Quartz configuration and presentation.
+- The masthead owns global section routes. Desktop and mobile within-section navigation are projections of the same Quartz content tree and active-section filters; do not maintain separate route lists.
 - Shared Quartz machinery remains owned by `GameCult/GameCult-Quartz`; do not vendor it here.
 - Generated output under `quartz-site/public/` is disposable and must not become source truth.

site/quartz.layout.ts

@@ -3,43 +3,37 @@ import * as Component from "./quartz/components"
 import DelveholdMasthead from "./quartz/components/DelveholdMasthead"
 
 const documentationExplorer = Component.ConditionalRender({
-  component: Component.DesktopOnly(
-    Component.Explorer({
-      title: "Documentation",
-      folderDefaultState: "collapsed",
-      folderClickBehavior: "link",
-      useSavedState: false,
-      filterFn: (node) => node.slug.startsWith("Documentation"),
-    }),
-  ),
+  component: Component.Explorer({
+    title: "Documentation",
+    folderDefaultState: "collapsed",
+    folderClickBehavior: "link",
+    useSavedState: false,
+    filterFn: (node) => node.slug.startsWith("Documentation"),
+  }),
   condition: (page) =>
     page.fileData.slug === "Documentation" || page.fileData.slug?.startsWith("Documentation/"),
 })
 
 const gameDesignExplorer = Component.ConditionalRender({
-  component: Component.DesktopOnly(
-    Component.Explorer({
-      title: "Game Design",
-      folderDefaultState: "collapsed",
-      folderClickBehavior: "link",
-      useSavedState: false,
-      filterFn: (node) => node.slug.startsWith("Game-Design"),
-    }),
-  ),
+  component: Component.Explorer({
+    title: "Game Design",
+    folderDefaultState: "collapsed",
+    folderClickBehavior: "link",
+    useSavedState: false,
+    filterFn: (node) => node.slug.startsWith("Game-Design"),
+  }),
   condition: (page) =>
     page.fileData.slug === "Game-Design" || page.fileData.slug?.startsWith("Game-Design/"),
 })
 
 const loreExplorer = Component.ConditionalRender({
-  component: Component.DesktopOnly(
-    Component.Explorer({
-      title: "Lore",
-      folderDefaultState: "collapsed",
-      folderClickBehavior: "link",
-      useSavedState: false,
-      filterFn: (node) => node.slug.startsWith("Lore"),
-    }),
-  ),
+  component: Component.Explorer({
+    title: "Lore",
+    folderDefaultState: "collapsed",
+    folderClickBehavior: "link",
+    useSavedState: false,
+    filterFn: (node) => node.slug.startsWith("Lore"),
+  }),
   condition: (page) => page.fileData.slug === "Lore" || page.fileData.slug?.startsWith("Lore/"),
 })
 

site/quartz/styles/custom.scss

@@ -39,32 +39,32 @@ body {
     height: calc(100vh - 8.2rem);
     padding-top: 2rem;
   }
+}
 
-  .page > #quartz-body .explorer-content,
-  .page > #quartz-body .explorer-content > .explorer-ul {
-    scrollbar-color: var(--secondary) transparent;
-    scrollbar-width: thin;
+.page > #quartz-body .explorer-content,
+.page > #quartz-body .explorer-content > .explorer-ul {
+  scrollbar-color: var(--secondary) transparent;
+  scrollbar-width: thin;
 
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
 
-    &::-webkit-scrollbar-track,
-    &::-webkit-scrollbar-corner {
-      background: transparent;
-    }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 
-    &::-webkit-scrollbar-thumb {
-      min-height: 2rem;
-      border-radius: 999px;
-      background: var(--secondary);
-    }
+  &::-webkit-scrollbar-thumb {
+    min-height: 2rem;
+    border-radius: 999px;
+    background: var(--secondary);
+  }
 
-    &::-webkit-scrollbar-button {
-      display: none;
-      width: 0;
-      height: 0;
-    }
+  &::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
   }
 }
 
@@ -131,6 +131,10 @@ article > h3 {
 }
 
 @media (max-width: 800px) {
+  .page > #quartz-body .sidebar.left:has(.explorer) {
+    z-index: 30;
+  }
+
   .delvehold-masthead {
     flex-direction: column;
     align-items: center;