fix(layout): grid triage and regression ()

* fix(table of contents): multiple scrollbars (https://github.com/jackyzha0/quartz/issues/1388)

* fix(center): Main content mininum width (https://github.com/jackyzha0/quartz/issues/1439)

* fix(code block): Horizontal overflow fix (https://github.com/jackyzha0/quartz/issues/1438, https://github.com/jackyzha0/quartz/issues/1353)

* WIP fix for ul/ol .overflow

* Fix: restore former scrollbar behavior for overflow lists (https://github.com/jackyzha0/quartz/issues/1437)

* Fix: code block overflow-x

* fix: Table of Content overflow (https://github.com/jackyzha0/quartz/issues/1437)

* Address feedback

* Move max-height toggle from js to css
This commit is contained in:
Emile Bangma 2024-09-25 23:20:58 +02:00 committed by GitHub
parent 921f45cf70
commit a7a0dcad22
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 34 additions and 23 deletions
quartz/components/styles

View file

@ -1,9 +1,10 @@
@use "../../styles/variables.scss" as *;
.backlinks {
@media all and not ($desktop) {
@media all and not ($mobile) {
overflow-y: auto;
display: initial;
display: flex;
flex-direction: column;
&:after {
pointer-events: none;
content: "";
@ -17,10 +18,6 @@
background: linear-gradient(transparent 0px, var(--light));
}
&:has(> .overflow) {
position: unset;
}
& > h3 {
font-size: 1rem;
margin: 0;
@ -39,10 +36,6 @@
}
& > .overflow {
max-height: unset;
& > li:last-of-type {
margin-bottom: 0;
}
&:after {
display: none;
}

View file

@ -1,8 +1,13 @@
@use "../../styles/variables.scss" as *;
.explorer {
display: flex;
flex-direction: column;
overflow-y: hidden;
&.desktop-only {
overflow-y: auto;
@media all and not ($mobile) {
display: flex;
}
}
&:after {
pointer-events: none;
@ -62,7 +67,8 @@ button#explorer {
#explorer-content {
list-style: none;
overflow: hidden;
max-height: none;
overflow-y: auto;
max-height: 100%;
transition:
max-height 0.35s ease,
visibility 0s linear 0s;
@ -70,6 +76,7 @@ button#explorer {
visibility: visible;
&.collapsed {
max-height: 0;
transition:
max-height 0.35s ease,
visibility 0s linear 0.35s;

View file

@ -1,5 +1,10 @@
.toc {
overflow-y: auto;
display: flex;
flex-direction: column;
&.desktop-only {
display: flex;
max-height: 40%;
}
}
button#toc {
@ -32,17 +37,19 @@ button#toc {
#toc-content {
list-style: none;
overflow: hidden;
max-height: none;
overflow-y: auto;
max-height: 100%;
transition:
max-height 0.5s ease,
max-height 0.35s ease,
visibility 0s linear 0s;
position: relative;
visibility: visible;
&.collapsed {
max-height: 0;
transition:
max-height 0.5s ease,
visibility 0s linear 0.5s;
max-height 0.35s ease,
visibility 0s linear 0.35s;
visibility: hidden;
}
@ -65,6 +72,9 @@ button#toc {
}
}
}
> ul.overflow {
max-height: none;
}
@for $i from 0 through 6 {
& .depth-#{$i} {