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 1 Packages Projects Releases Wiki Activity

Configurable layout breakpoints

Browse Source
This commit is contained in:
saberzero1 2024-08-14 16:12:01 +02:00
parent a94d2844ca
commit 44cb4a43e1
6 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz/components/styles/graph.scss
View File

@ -62,7 +62,7 @@
height: 60vh;
width: 50vw;
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
width: 90%;
}
}

2
quartz/components/styles/listPage.scss
View File

@ -13,7 +13,7 @@ li.section-li {
display: grid;
grid-template-columns: fit-content(8em) 3fr 1fr;
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
& > .tags {
display: none;
}

2
quartz/components/styles/popover.scss
View File

@ -70,7 +70,7 @@
opacity 0.3s ease,
visibility 0.3s ease;
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
display: none !important;
}
}

6
quartz/components/styles/search.scss
View File

@ -62,7 +62,7 @@
margin-left: auto;
margin-right: auto;
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
width: 90%;
}
@ -104,7 +104,7 @@
flex: 0 0 min(30%, 450px);
}
@media all and (min-width: $tabletBreakpoint) {
@media all and not ($tablet) {
&[data-preview] {
& .result-card > p.preview {
display: none;
@ -130,7 +130,7 @@
border-radius: 5px;
}
@media all and (max-width: $tabletBreakpoint) {
@media all and ($tablet) {
& > #preview-container {
display: none !important;
}

44
quartz/styles/base.scss
View File

@ -109,11 +109,11 @@ a {
.desktop-only {
display: initial;
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
display: none;
}
&.toc {
@media all and (max-width: $tabletBreakpoint) {
@media all and ($tablet) {
display: none;
}
}
@ -121,21 +121,21 @@ a {
.mobile-only {
display: none;
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
display: initial;
}
&.toc {
@media all and (max-width: $tabletBreakpoint) {
@media all and ($tablet) {
display: initial;
}
}
}
.page {
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
padding: 0 1rem;
}
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
margin: 0 auto;
max-width: 100%;
}
@ -169,10 +169,10 @@ a {
& > #quartz-body {
width: 100%;
display: flex;
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
flex-direction: column;
}
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
padding: 0 1rem;
}
@ -190,11 +190,11 @@ a {
}
& .sidebar.left {
left: 0;
@media all and (min-width: $desktopBreakpoint) {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and ($desktop) {
left: 0;
}
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
gap: 0;
align-items: center;
position: initial;
@ -208,11 +208,13 @@ a {
& .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
flex-wrap: wrap;
@media all and (min-width: $mobileBreakpoint) {
margin-left: $sidePanelWidth;
margin-right: 0;
margin-left: $sidePanelWidth;
margin-right: 0;
@media all and ($mobile) {
margin-left: inherit;
margin-right: inherit;
}
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
position: initial;
flex-direction: row;
padding: 0;
@ -232,17 +234,17 @@ a {
width: $pageWidth;
margin-top: 1rem;
@media all and (max-width: $tabletBreakpoint) {
@media all and ($tablet) {
width: initial;
}
}
& .page-header {
margin: $topSpacing auto 0 auto;
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
margin: $topSpacing 0 0 0;
}
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
margin-top: 2rem;
}
}
@ -252,13 +254,13 @@ a {
margin-left: auto;
margin-right: auto;
width: $pageWidth;
@media all and (max-width: $desktopBreakpoint) {
@media all and ($desktop) {
width: calc(100% - $sidePanelWidth);
right: 0;
margin-left: $sidePanelWidth;
margin-right: 0;
}
@media all and (max-width: $mobileBreakpoint) {
@media all and ($mobile) {
width: initial;
margin-left: 0;
}

20
quartz/styles/variables.scss
View File

@ -1,7 +1,21 @@
/**
* Layout breakpoints
* $mobile: screen width below this value will use mobile styles
* $tablet: screen width below this value will use tablet styles
* $desktop: screen width below this value will use desktop styles
* assuming mobile < tablet < desktop
*/
$breakpoints: (
mobile: 750px,
tablet: 1000px,
desktop: 1500px,
);
$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
$tablet: "(max-width: #{map-get($breakpoints, tablet)})";
$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
$pageWidth: 750px;
$mobileBreakpoint: 750px;
$tabletBreakpoint: 1000px;
$desktopBreakpoint: 1500px;
$sidePanelWidth: 380px;
$topSpacing: 6rem;
$boldWeight: 700;