GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Sidebar auto scaling

Browse Source
This commit is contained in:
saberzero1 2024-08-16 17:06:57 +02:00
parent 74225dfae0
commit 75c249f071
4 changed files with 72 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz/components/Backlinks.tsx
View File

@ -14,6 +14,7 @@ const Backlinks: QuartzComponent = ({
const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug)) const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
return ( return (
<div class={classNames(displayClass, "backlinks")}> <div class={classNames(displayClass, "backlinks")}>
<div class="backlinks-container">
<h3>{i18n(cfg.locale).components.backlinks.title}</h3> <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
<ul class="overflow"> <ul class="overflow">
{backlinkFiles.length > 0 ? ( {backlinkFiles.length > 0 ? (
@ -29,6 +30,7 @@ const Backlinks: QuartzComponent = ({
)} )}
</ul> </ul>
</div> </div>
</div>
) )
} }

33
quartz/components/styles/backlinks.scss
View File

@ -1,6 +1,24 @@
.backlinks { @use "../../styles/variables.scss" as *;
position: relative;
.backlinks {
@media all and not ($desktop) {
overflow-y: auto;
display: initial;
&:after {
pointer-events: none;
content: "";
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
}
}
& > .backlinks-container {
& > h3 { & > h3 {
font-size: 1rem; font-size: 1rem;
margin: 0; margin: 0;
@ -17,4 +35,15 @@
} }
} }
} }
& > .overflow {
max-height: unset;
& > li:last-of-type {
margin-bottom: 0;
}
&:after {
display: none;
}
}
}
} }

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

@ -5,6 +5,18 @@
&.tablet-only { &.tablet-only {
overflow-y: auto; overflow-y: auto;
} }
&:after {
pointer-events: none;
content: "";
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
}
} }
button#explorer { button#explorer {
@ -66,7 +78,7 @@ button#explorer {
} }
&.collapsed > .overflow::after { &.collapsed > .overflow::after {
opacity: 0; display: none;
} }
& ul { & ul {

4
quartz/styles/base.scss
View File

@ -181,11 +181,11 @@ a {
box-sizing: border-box; box-sizing: border-box;
padding: 0 4rem; padding: 0 4rem;
position: fixed; position: fixed;
max-height: calc(100vh - $topSpacing - 4rem);
} }
& .sidebar.left { & .sidebar.left {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
max-height: calc(100vh - $topSpacing);
@media all and ($desktop) { @media all and ($desktop) {
left: 0; left: 0;
} }
@ -203,7 +203,6 @@ a {
& .sidebar.right { & .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
flex-wrap: wrap;
margin-left: $sidePanelWidth; margin-left: $sidePanelWidth;
margin-right: 0; margin-right: 0;
@media all and ($mobile) { @media all and ($mobile) {
@ -211,6 +210,7 @@ a {
margin-right: inherit; margin-right: inherit;
} }
@media all and ($desktop) { @media all and ($desktop) {
max-height: unset;
position: initial; position: initial;
flex-direction: row; flex-direction: row;
padding: 0; padding: 0;