GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-27 23:04:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
saberzero1 2024-10-26 18:05:36 +02:00
parent c2e9477941
commit 8bb32c243e
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,25 +2,25 @@
@media all and ($mobile) { @media all and ($mobile) {
.page > #quartz-body { .page > #quartz-body {
// Move page on mobile // Shift page position when toggling Explorer on mobile.
& > :not(.sidebar.left:has(.explorer)) { & > :not(.sidebar.left:has(.explorer)) {
transform: translateX(0); transform: translateX(0);
transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out;
} }
&.lock-scroll > :not(.sidebar.left:has(.explorer)) { &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
transform: translateX(100dvw); transform: translateX(100dvw);
//width: 100%;
transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out;
} }
// Sticky top bar (stays in place when scrolling down on mobile. // Sticky top bar (stays in place when scrolling down on mobile).
.sidebar.left:has(.explorer) { .sidebar.left:has(.explorer) {
box-sizing: border-box; box-sizing: border-box;
position: sticky; position: sticky;
background-color: var(--light); background-color: var(--light);
} }
// Hide until done loading // 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;
} }
@ -65,17 +65,17 @@
} }
/*&:after { /*&:after {
pointer-events: none; pointer-events: none;
content: ""; content: "";
width: 100%; width: 100%;
height: 50px; height: 50px;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
opacity: 1; opacity: 1;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light)); background: linear-gradient(transparent 0px, var(--light));
}*/ }*/
} }
button#mobile-explorer, button#mobile-explorer,
@ -248,7 +248,6 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
background-color: var(--light); background-color: var(--light);
max-width: 100dvw; max-width: 100dvw;
left: -100dvw; left: -100dvw;
//transform: translateX(0);
width: 100%; width: 100%;
transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out;
overflow: hidden; overflow: hidden;