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

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

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

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

@ -1,5 +1,23 @@
@use "../../styles/variables.scss" as *;
.explorer {
&.desktop-only {
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 {
background-color: transparent;
border: none;
@ -58,10 +76,6 @@ button#explorer {
visibility: hidden;
}
&.collapsed > .overflow::after {
opacity: 0;
}
& ul {
list-style: none;
margin: 0.08rem 0;
@ -76,6 +90,9 @@ button#explorer {
pointer-events: all;
}
}
> #explorer-ul {
max-height: none;
}
}
svg {

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

@ -65,7 +65,7 @@
height: 80vh;
width: 80vw;
@media all and (max-width: $fullPageWidth) {
@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;
}
}

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

@ -3,7 +3,9 @@
.search {
min-width: fit-content;
max-width: 14rem;
flex-grow: 0.3;
@media all and ($mobile) {
flex-grow: 0.3;
}
& > .search-button {
background-color: var(--lightgray);
@ -62,7 +64,7 @@
margin-left: auto;
margin-right: auto;
@media all and (max-width: $fullPageWidth) {
@media all and ($desktop) {
width: 90%;
}
@ -104,7 +106,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 +132,7 @@
border-radius: 5px;
}
@media all and (max-width: $tabletBreakpoint) {
@media all and ($tablet) {
& > #preview-container {
display: none !important;
}

4
quartz/components/styles/toc.scss
View File

@ -1,3 +1,7 @@
.toc {
overflow-y: auto;
}
button#toc {
background-color: transparent;
border: none;