keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-06-22 00:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive design grid (#1354)

Browse Source 
* Responsive design grid

* Addressed PR feedback

* Bump Quartz version 4.3.1 => 4.4.0

* Moved page-header into center

* Updated docs with new layouts

* Sync updated version number with package-lock

* Table of Content scrollbar auto

* Reset node_modules

* Updated layout images

* Fixed tablet layout

* Finilazed layout images
This commit is contained in:
Emile Bangma
2024-09-23 22:40:12 +02:00
committed by GitHub
parent 9cefcd0dd1
commit 7d7e334976
17 changed files with 247 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
quartz/styles/base.scss
View File

@ -12,7 +12,6 @@ html {
body,
section {
margin: 0;
max-width: 100%;
box-sizing: border-box;
background-color: var(--light);
font-family: var(--bodyFont);
@ -109,25 +108,21 @@ a {
.desktop-only {
display: initial;
@media all and (max-width: $fullPageWidth) {
@media all and ($mobile) {
display: none;
}
}
.mobile-only {
display: none;
@media all and (max-width: $fullPageWidth) {
@media all and ($mobile) {
display: initial;
}
}
.page {
@media all and (max-width: $fullPageWidth) {
margin: 0 auto;
padding: 0 1rem;
max-width: $pageWidth;
}
max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
margin: 0 auto;
& article {
& > h1 {
font-size: 2rem;
@ -155,79 +150,117 @@ a {
}
& > #quartz-body {
width: 100%;
display: flex;
@media all and (max-width: $fullPageWidth) {
flex-direction: column;
display: grid;
grid-template-columns: #{map-get($desktopGrid, templateColumns)};
grid-template-rows: #{map-get($desktopGrid, templateRows)};
column-gap: #{map-get($desktopGrid, columnGap)};
row-gap: #{map-get($desktopGrid, rowGap)};
grid-template-areas: #{map-get($desktopGrid, templateAreas)};
@media all and ($desktop) {
grid-template-columns: #{map-get($tabletGrid, templateColumns)};
grid-template-rows: #{map-get($tabletGrid, templateRows)};
column-gap: #{map-get($tabletGrid, columnGap)};
row-gap: #{map-get($tabletGrid, rowGap)};
grid-template-areas: #{map-get($tabletGrid, templateAreas)};
}
@media all and ($mobile) {
grid-template-columns: #{map-get($mobileGrid, templateColumns)};
grid-template-rows: #{map-get($mobileGrid, templateRows)};
column-gap: #{map-get($mobileGrid, columnGap)};
row-gap: #{map-get($mobileGrid, rowGap)};
grid-template-areas: #{map-get($mobileGrid, templateAreas)};
}
@media all and ($desktop) {
padding: 0 1rem;
}
@media all and ($mobile) {
margin: 0 auto;
}
& .sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
top: 0;
width: $sidePanelWidth;
margin-top: $topSpacing;
box-sizing: border-box;
padding: 0 4rem;
position: fixed;
@media all and (max-width: $fullPageWidth) {
position: initial;
flex-direction: row;
padding: 0;
width: initial;
margin-top: 2rem;
}
padding: $topSpacing 2rem 2rem 2rem;
display: flex;
height: 100vh;
position: sticky;
}
& .sidebar.left {
z-index: 1;
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) {
grid-area: sidebar-left;
flex-direction: column;
@media all and ($mobile) {
gap: 0;
align-items: center;
position: initial;
display: flex;
height: unset;
flex-direction: row;
padding: 0;
padding-top: 2rem;
}
}
& .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
flex-wrap: wrap;
& > * {
@media all and (max-width: $fullPageWidth) {
grid-area: sidebar-right;
margin-right: 0;
flex-direction: column;
@media all and ($mobile) {
margin-left: inherit;
margin-right: inherit;
}
@media all and ($desktop) {
position: initial;
height: unset;
width: 100%;
flex-direction: row;
padding: 0;
& > * {
flex: 1;
min-width: 140px;
}
& > .toc {
display: none;
}
}
}
}
& .page-header,
& .page-footer {
width: $pageWidth;
margin-top: 1rem;
@media all and (max-width: $fullPageWidth) {
width: initial;
& .page-header,
& .page-footer {
margin-top: 1rem;
}
}
& .page-header {
margin: $topSpacing auto 0 auto;
@media all and (max-width: $fullPageWidth) {
margin-top: 2rem;
& .page-header {
grid-area: page-header;
margin: $topSpacing 0 0 0;
@media all and ($mobile) {
margin-top: 0;
padding: 0;
}
}
}
& .center,
& footer {
margin-left: auto;
margin-right: auto;
width: $pageWidth;
@media all and (max-width: $fullPageWidth) {
width: initial;
& .center > article {
grid-area: page-center;
}
& .page-footer {
grid-area: page-footer;
}
& .center,
& footer {
margin-left: auto;
margin-right: auto;
@media all and ($desktop) {
margin-right: 0;
}
@media all and ($mobile) {
margin-left: 0;
}
}
& footer {
margin-left: 0;
margin-right: 0;
}
}
}