make mobile look nice

quartz.config.ts

@@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4",
+    pageTitle: "Quartz 4",
     pageTitleSuffix: "",
     enableSPA: true,
     enablePopovers: true,

quartz/components/scripts/explorer.inline.ts

@@ -259,9 +259,10 @@ document.addEventListener("prenav", async (e: CustomEventMap["prenav"]) => {
 
 document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   const currentSlug = e.detail.url
-  const mobileExplorer = document.querySelector("#mobile-explorer")
-  if (mobileExplorer) {
-    mobileExplorer.classList.add("collapsed")
+  // collapse explorer on mobile
+  for (const explorer of document.querySelectorAll(".explorer")) {
+    explorer.classList.add("collapsed")
+    explorer.setAttribute("aria-expanded", "false")
   }
   await setupExplorer(currentSlug)
 

quartz/components/styles/explorer.scss

@@ -32,7 +32,7 @@
   overflow-y: hidden;
   flex: 0 1 auto;
   &.collapsed {
-    flex: 0 1 1.2em;
+    flex: 0 1 1.2rem;
   }
 
   @media all and ($mobile) {
@@ -100,7 +100,7 @@ button#desktop-explorer {
     opacity: 0.8;
   }
 
-  .explorer.collapsed > & .fold {
+  .explorer.collapsed .fold {
     transform: rotateZ(-90deg);
   }
 }
@@ -207,51 +207,51 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
 
 .explorer {
   @media all and ($mobile) {
-    #explorer-content {
-      box-sizing: border-box;
-      overscroll-behavior: none;
-      z-index: 100;
-      position: absolute;
-      top: 0;
-      background-color: var(--light);
-      max-width: 100dvw;
-      left: -100dvw;
-      width: 100%;
-      transition: transform 300ms ease-in-out;
-      overflow: hidden;
-      padding: $topSpacing 2rem 2rem;
-      height: 100dvh;
-      max-height: 100dvh;
-      margin-top: 0;
-      visibility: hidden;
+    &.collapsed {
+      flex: 0 0 34px;
 
-      &:not(.collapsed) {
-        transform: translateX(100dvw);
-        visibility: visible;
+      & > #explorer-content {
+        transform: translateX(-100vw);
+        visibility: hidden;
+      }
     }
 
-      &.collapsed {
+    &:not(.collapsed) {
+      flex: 0 0 34px;
+
+      & > #explorer-content {
         transform: translateX(0);
         visibility: visible;
       }
     }
 
-    #mobile-explorer {
-      margin: 5px;
-      z-index: 101;
-
-      &:not(.collapsed) .lucide-menu {
-        transform: rotate(-90deg);
-        transition: transform 200ms ease-in-out;
+    #explorer-content {
+      box-sizing: border-box;
+      z-index: 100;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: var(--light);
+      max-width: 100vw;
+      width: 100%;
+      transform: translateX(-100vw);
+      transition:
+        transform 200ms ease,
+        visibility 200ms ease;
+      overflow: hidden;
+      padding: $topSpacing 0 2rem 0;
+      height: 100dvh;
+      max-height: 100dvh;
+      visibility: hidden;
     }
 
+    #mobile-explorer {
+      margin: 0;
+      padding: 5px;
+      z-index: 101;
+
       .lucide-menu {
         stroke: var(--darkgray);
-        transition: transform 200ms ease;
-
-        &:hover {
-          stroke: var(--dark);
-        }
       }
     }
   }