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

30
quartz/components/Backlinks.tsx
View File

@ -14,20 +14,22 @@ 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")}>
<h3>{i18n(cfg.locale).components.backlinks.title}</h3> <div class="backlinks-container">
<ul class="overflow"> <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
{backlinkFiles.length > 0 ? ( <ul class="overflow">
backlinkFiles.map((f) => ( {backlinkFiles.length > 0 ? (
<li> backlinkFiles.map((f) => (
<a href={resolveRelative(fileData.slug!, f.slug!)} class="internal"> <li>
{f.frontmatter?.title} <a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
</a> {f.frontmatter?.title}
</li> </a>
)) </li>
) : ( ))
<li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li> ) : (
)} <li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
</ul> )}
</ul>
</div>
</div> </div>
) )
} }

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

@ -1,19 +1,48 @@
.backlinks { @use "../../styles/variables.scss" as *;
position: relative;
& > h3 { .backlinks {
font-size: 1rem; @media all and not ($desktop) {
margin: 0; 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));
}
} }
& > ul { & > .backlinks-container {
list-style: none; & > h3 {
padding: 0; font-size: 1rem;
margin: 0.5rem 0; margin: 0;
}
& > li { & > ul {
& > a { list-style: none;
background-color: transparent; padding: 0;
margin: 0.5rem 0;
& > li {
& > a {
background-color: transparent;
}
}
}
& > .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;