smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-17 22:14:17 +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
type="button"
id="mobile-explorer"
class="collapsed hide-until-loaded explorer-toggle"
class="explorer-toggle hide-until-loaded"
data-mobile={true}
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"]) => {
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)
// 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")
hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
})

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

@ -16,10 +16,10 @@
box-sizing: border-box;
position: sticky;
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 {
display: none;
}
@ -33,6 +33,15 @@
flex: 0 1 auto;
&.collapsed {
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) {
@ -93,16 +102,6 @@ button#desktop-explorer {
display: inline-block;
margin: 0;
}
& .fold {
margin-left: 0.5rem;
transition: transform 0.3s ease;
opacity: 0.8;
}
.explorer.collapsed .fold {
transform: rotateZ(-90deg);
}
}
#explorer-content {
@ -113,7 +112,7 @@ button#desktop-explorer {
& ul {
list-style: none;
margin: 0.08rem 0;
margin: 0;
padding: 0;
& li > a {
@ -231,6 +230,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
position: absolute;
top: 0;
left: 0;
margin-top: 0;
background-color: var(--light);
max-width: 100vw;
width: 100%;
@ -239,7 +239,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
transform 200ms ease,
visibility 200ms ease;
overflow: hidden;
padding: $topSpacing 0 2rem 0;
padding: 4rem 0 2rem 0;
height: 100dvh;
max-height: 100dvh;
visibility: hidden;