diff --git a/quartz.config.ts b/quartz.config.ts index 0cd7e946c..51a75515d 100644 --- a/quartz.config.ts +++ b/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, diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index b8c2d7f95..9e918eebf 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/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) diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 664953495..714eb2c40 100644 --- a/quartz/components/styles/explorer.scss +++ b/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; + #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; + } - &:not(.collapsed) .lucide-menu { - transform: rotate(-90deg); - transition: transform 200ms ease-in-out; - } + #mobile-explorer { + margin: 0; + padding: 5px; + z-index: 101; .lucide-menu { stroke: var(--darkgray); - transition: transform 200ms ease; - - &:hover { - stroke: var(--dark); - } } } }