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

more style fixes

Browse Source
This commit is contained in:
Jacky Zhao 2025-03-09 14:49:53 -07:00
parent e320324cf2
commit d02bb0f044
3 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz/components/Explorer.tsx
View File

@ -74,7 +74,7 @@ export default ((userOpts?: Partial<Options>) => {
<button <button
type="button" type="button"
id="mobile-explorer" id="mobile-explorer"
class="collapsed hide-until-loaded explorer-toggle" class="explorer-toggle hide-until-loaded"
data-mobile={true} data-mobile={true}
aria-controls="explorer-content" aria-controls="explorer-content"
> >

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

@ -259,14 +259,17 @@ 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
// collapse explorer on mobile
for (const explorer of document.querySelectorAll(".explorer")) {
explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false")
}
await setupExplorer(currentSlug) await setupExplorer(currentSlug)
// Hide explorer on mobile until it is requested // if mobile hamburger is visible, collapse by default
const mobileExplorer = document.getElementById("mobile-explorer")
if (mobileExplorer && mobileExplorer.checkVisibility()) {
for (const explorer of document.querySelectorAll(".explorer")) {
explorer.classList.add("collapsed")
explorer.setAttribute("aria-expanded", "false")
}
}
const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer") const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
hiddenUntilDoneLoading?.classList.remove("hide-until-loaded") hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
}) })

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

@ -16,10 +16,10 @@
box-sizing: border-box; box-sizing: border-box;
position: sticky; position: sticky;
background-color: var(--light); background-color: var(--light);
padding: 1rem 0 1rem 0;
margin: 0;
} }
// Hide Explorer on mobile until done loading.
// Prevents ugly animation on page load.
.hide-until-loaded ~ #explorer-content { .hide-until-loaded ~ #explorer-content {
display: none; display: none;
} }
@ -33,6 +33,15 @@
flex: 0 1 auto; flex: 0 1 auto;
&.collapsed { &.collapsed {
flex: 0 1 1.2rem; flex: 0 1 1.2rem;
& .fold {
transform: rotateZ(-90deg);
}
}
& .fold {
margin-left: 0.5rem;
transition: transform 0.3s ease;
opacity: 0.8;
} }
@media all and ($mobile) { @media all and ($mobile) {
@ -93,16 +102,6 @@ button#desktop-explorer {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
& .fold {
margin-left: 0.5rem;
transition: transform 0.3s ease;
opacity: 0.8;
}
.explorer.collapsed .fold {
transform: rotateZ(-90deg);
}
} }
#explorer-content { #explorer-content {
@ -113,7 +112,7 @@ button#desktop-explorer {
& ul { & ul {
list-style: none; list-style: none;
margin: 0.08rem 0; margin: 0;
padding: 0; padding: 0;
& li > a { & li > a {
@ -231,6 +230,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
margin-top: 0;
background-color: var(--light); background-color: var(--light);
max-width: 100vw; max-width: 100vw;
width: 100%; width: 100%;
@ -239,7 +239,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
transform 200ms ease, transform 200ms ease,
visibility 200ms ease; visibility 200ms ease;
overflow: hidden; overflow: hidden;
padding: $topSpacing 0 2rem 0; padding: 4rem 0 2rem 0;
height: 100dvh; height: 100dvh;
max-height: 100dvh; max-height: 100dvh;
visibility: hidden; visibility: hidden;