smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 06:24:22 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

make mobile look nice

Browse Source
This commit is contained in:
Jacky Zhao 2025-03-09 14:03:10 -07:00
parent 9f8a8c83e5
commit e320324cf2
3 changed files with 40 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz.config.ts
View File

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

7
quartz/components/scripts/explorer.inline.ts
View File

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

70
quartz/components/styles/explorer.scss
View File

@ -32,7 +32,7 @@
overflow-y: hidden; overflow-y: hidden;
flex: 0 1 auto; flex: 0 1 auto;
&.collapsed { &.collapsed {
flex: 0 1 1.2em; flex: 0 1 1.2rem;
} }
@media all and ($mobile) { @media all and ($mobile) {
@ -100,7 +100,7 @@ button#desktop-explorer {
opacity: 0.8; opacity: 0.8;
} }
.explorer.collapsed > & .fold { .explorer.collapsed .fold {
transform: rotateZ(-90deg); transform: rotateZ(-90deg);
} }
} }
@ -207,51 +207,51 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
.explorer { .explorer {
@media all and ($mobile) { @media all and ($mobile) {
#explorer-content { &.collapsed {
box-sizing: border-box; flex: 0 0 34px;
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;
&:not(.collapsed) { & > #explorer-content {
transform: translateX(100dvw); transform: translateX(-100vw);
visibility: visible; visibility: hidden;
} }
}
&.collapsed { &:not(.collapsed) {
flex: 0 0 34px;
& > #explorer-content {
transform: translateX(0); transform: translateX(0);
visibility: visible; visibility: visible;
} }
} }
#mobile-explorer { #explorer-content {
margin: 5px; box-sizing: border-box;
z-index: 101; 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 { #mobile-explorer {
transform: rotate(-90deg); margin: 0;
transition: transform 200ms ease-in-out; padding: 5px;
} z-index: 101;
.lucide-menu { .lucide-menu {
stroke: var(--darkgray); stroke: var(--darkgray);
transition: transform 200ms ease;
&:hover {
stroke: var(--dark);
}
} }
} }
} }