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

Responsive Design Rework

Browse Source
This commit is contained in:
saberzero1 2024-08-12 20:26:34 +02:00
parent 323167a001
commit cd660e6ab2
4 changed files with 55 additions and 24 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; height: 60vh;
width: 50vw; width: 50vw;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $desktopBreakpoint) {
width: 90%; width: 90%;
} }
} }

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

@ -62,7 +62,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $desktopBreakpoint) {
width: 90%; width: 90%;
} }

71
quartz/styles/base.scss
View File

@ -109,22 +109,34 @@ a {
.desktop-only { .desktop-only {
display: initial; display: initial;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $mobileBreakpoint) {
display: none; display: none;
} }
&.toc {
@media all and (max-width: $tabletBreakpoint) {
display: none;
}
}
} }
.mobile-only { .mobile-only {
display: none; display: none;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $mobileBreakpoint) {
display: initial; display: initial;
} }
&.toc {
@media all and (max-width: $tabletBreakpoint) {
display: initial;
}
}
} }
.page { .page {
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $desktopBreakpoint) {
margin: 0 auto;
padding: 0 1rem; padding: 0 1rem;
}
@media all and (max-width: $mobileBreakpoint) {
margin: 0 auto;
max-width: $pageWidth; max-width: $pageWidth;
} }
@ -157,7 +169,7 @@ a {
& > #quartz-body { & > #quartz-body {
width: 100%; width: 100%;
display: flex; display: flex;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $desktopBreakpoint) {
flex-direction: column; flex-direction: column;
} }
@ -172,7 +184,16 @@ a {
box-sizing: border-box; box-sizing: border-box;
padding: 0 4rem; padding: 0 4rem;
position: fixed; position: fixed;
@media all and (max-width: $fullPageWidth) { }
& .sidebar.left {
left: 0;
@media all and (min-width: $desktopBreakpoint) {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
}
@media all and (max-width: $mobileBreakpoint) {
gap: 0;
align-items: center;
position: initial; position: initial;
flex-direction: row; flex-direction: row;
padding: 0; padding: 0;
@ -181,19 +202,21 @@ a {
} }
} }
& .sidebar.left {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) {
gap: 0;
align-items: center;
}
}
& .sidebar.right { & .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
flex-wrap: wrap; flex-wrap: wrap;
& > * { @media all and (min-width: $mobileBreakpoint) {
@media all and (max-width: $fullPageWidth) { margin-left: $sidePanelWidth;
margin-right: 0;
}
@media all and (max-width: $desktopBreakpoint) {
position: initial;
flex-direction: row;
padding: 0;
width: initial;
margin-top: 2rem;
display: flex;
& > * {
flex: 1; flex: 1;
min-width: 140px; min-width: 140px;
} }
@ -206,14 +229,17 @@ a {
width: $pageWidth; width: $pageWidth;
margin-top: 1rem; margin-top: 1rem;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $tabletBreakpoint) {
width: initial; width: initial;
} }
} }
& .page-header { & .page-header {
margin: $topSpacing auto 0 auto; margin: $topSpacing auto 0 auto;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $desktopBreakpoint) {
margin: $topSpacing 0 0 0;
}
@media all and (max-width: $tabletBreakpoint) {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@ -223,10 +249,15 @@ a {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: $pageWidth; width: $pageWidth;
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $desktopBreakpoint) {
width: calc(100% - $sidePanelWidth);
right: 0;
margin-left: $sidePanelWidth;
margin-right: 0;
}
@media all and (max-width: $mobileBreakpoint) {
width: initial; width: initial;
margin-left: 0; margin-left: 0;
margin-right: 0;
} }
} }
} }

4
quartz/styles/variables.scss
View File

@ -1,9 +1,9 @@
$pageWidth: 750px; $pageWidth: 750px;
$mobileBreakpoint: 600px; $mobileBreakpoint: 750px;
$tabletBreakpoint: 1000px; $tabletBreakpoint: 1000px;
$desktopBreakpoint: 1500px;
$sidePanelWidth: 380px; $sidePanelWidth: 380px;
$topSpacing: 6rem; $topSpacing: 6rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$boldWeight: 700; $boldWeight: 700;
$semiBoldWeight: 600; $semiBoldWeight: 600;
$normalWeight: 400; $normalWeight: 400;