keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-07-01 08:17:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update layout to new Quartz version

Browse Source
This commit is contained in:
Théo Marchal
2025-06-29 17:26:31 +02:00
parent af4b26f0e2
commit 69f191847c
2 changed files with 289 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
custom/docker-compose.yml
View File

@ -1,5 +1,3 @@
version: '3.4'
services:
quartz:
image: quartz-jpg

465
quartz/styles/custom.scss
View File

@ -12,7 +12,7 @@
.callout {
border: 3px solid #885a9f;
background-color:initial;
background-color: initial;
border-radius: 1rem;
}
@ -43,7 +43,6 @@
}
}
table {
border: 2px solid var(--gray);
@ -60,185 +59,13 @@ table {
}
}
ul.overflow, ol.overflow {
max-height: initial;
}
ul.overflow::after, ol.overflow::after {
position:initial;
}
#toc-content {
& ul {
& > li > a {
opacity: 0.75;
}
}
}
.page-title {
margin-top: 0.5rem;
}
// Align dark mode and search
.darkmode.desktop-only {
margin:unset;
margin-top:0.25rem;
}
// Bigger popover
.popover {
& > .popover-inner {
width: 45rem;
max-height: 35rem;
}
}
// Hide buttons
button#explorer {
display: none;
}
button#toc {
display: none;
}
.page .page-header {
margin-top: 0;
width: initial;
}
.breadcrumb-container {
margin-top: 1.25rem;
}
hr {
margin: 1rem auto;
}
footer {
margin-bottom: 1rem;
& p {
font-size: 1rem;
}
@media all and (max-width: $fullPageWidth) {
margin-bottom: 1rem;
}
}
.page {
& > #quartz-body {
& .center {
& p {
font-size: 1.15rem;
white-space: break-spaces;
hyphens: none;
}
& li {
font-size: 1.15rem;
}
& h1 {
font-size: 2rem;
margin-top: 0.65rem;
}
& h2 {
font-size: 1.7rem;
}
& h3 {
font-size: 1.5rem;
}
& h4 {
font-size: 1.3rem;
}
}
& .sidebar {
gap: 1rem;
margin-top: 1.25rem;
@media all and (min-width: $fullPageWidth) {
gap: 0rem;
width: 370px;
padding: 0 3rem;
}
@media all and (max-width: $fullPageWidth) {
margin-top: 1rem;
}
}
& .sidebar.left {
margin-top: 0;
height: 100%;
overflow-y: scroll;
@media all and (min-width: $maxFullPageWidth) {
left: calc(50vw - 900px);
}
@media all and (max-width: $maxFullPageWidth) {
left: calc(50vw - 790px);
}
}
& .sidebar.right {
flex-direction: row;
gap: 1rem;
@media all and (min-width: $maxFullPageWidth) {
right: calc(50vw - 900px);
}
@media all and (max-width: $fullPageWidth) {
margin-top: 0;
flex-direction: column;
}
@media all and (max-width: $maxFullPageWidth) {
right: calc(50vw - 790px);
}
& > * {
@media all and (max-width: $fullPageWidth) {
flex: 1;
min-width: 100%;
}
}
}
}
}
.page .center, .page footer {
@media all and (min-width: $maxFullPageWidth) {
width: 950px;
}
@media all and (max-width: $maxFullPageWidth) {
width: 800px;
}
@media all and (max-width: $mobileBreakpoint) {
width: initial;
}
}
.usage {
display:flex;
display: flex;
flex-direction: row;
align-items: center;
& p {
margin:0;
margin: 0;
}
& .box {
@ -286,4 +113,290 @@ footer {
& .iright {
padding-right: 1rem;
}
}
// Bigger popover
.popover {
& > .popover-inner {
width: 30rem;
max-height: 25rem;
}
}
// Hide buttons
.explorer button.desktop-explorer, button.toc-header {
display: none;
}
.page .page-header {
margin-top: 0;
width: initial;
}
.page {
@media all and not ($mobile) {
max-width: unset;
& > #quartz-body {
grid-template: none;
display: flex;
justify-content: center;
gap: 0;
.breadcrumb-container {
margin-top: 1.25rem;
}
hr {
margin: 1rem auto;
}
footer {
margin-bottom: 1rem;
& p {
font-size: 1rem;
}
}
ul.overflow, ol.overflow {
max-height: initial;
}
ul.overflow::after, ol.overflow::after {
position: initial;
}
ul.toc-content.overflow {
& > li > a {
opacity: 0.75;
}
}
& .center, & footer {
@media all and ($desktop) {
width: initial;
min-width: unset;
max-width: 650px;
margin-left: unset;
margin-right: unset;
}
@media all and ($maxDesktop) {
width: 950px;
min-width: unset;
max-width: unset;
margin-left: unset;
margin-right: unset;
}
}
& .center {
@media all and ($desktop) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media all and ($maxDesktop) {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
& p {
font-size: 1.15rem;
white-space: break-spaces;
hyphens: none;
}
& footer p {
font-size: 1rem;
}
& footer li {
font-size: 1rem;
}
& li {
font-size: 1.15rem;
}
& h1 {
font-size: 2rem;
margin-top: 0.65rem;
}
& h2 {
font-size: 1.7rem;
}
& h3 {
font-size: 1.5rem;
}
& h4 {
font-size: 1.3rem;
}
}
& .page-header {
margin-top: 0;
}
& .sidebar {
gap: 1rem;
margin-top: 1.25rem;
padding-top: 0rem;
@media all and ($desktop)
{
width: 300px;
}
@media all and ($maxDesktop)
{
gap: 0rem;
width: 370px;
padding: 0 3rem;
}
}
& .sidebar.left {
height: 100vh;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
overflow-y: scroll;
@media all and ($desktop)
{
padding-left: 1rem;
padding-right: 0;
}
@media all and ($maxDesktop)
{
padding-left: 2rem;
padding-right: 0;
}
.page-title {
margin-top: 0.5rem;
}
.explorer-content {
max-height: none;
margin-top: .5rem;
list-style: none;
transition: max-height .35s;
overflow: hidden;
}
.explorer {
flex-direction: unset;
flex: unset;
min-height: unset;
display: initial;
overflow-y: unset;
}
}
& .sidebar.right {
gap: 1rem;
flex-direction: row;
flex-wrap: wrap;
padding-top: 1rem;
@media all and ($desktop)
{
margin-top: 0;
padding-left: 0;
padding-right: 1rem;
}
@media all and ($maxDesktop)
{
margin-top: 0;
padding-left: 0;
padding-right: 2rem;
}
& > * {
@media all and ($maxDesktop) {
flex: unset;
min-width: fit-content;
}
}
// Align dark mode and search
.darkmode {
margin: unset;
margin-top: 0.25rem;
}
.search {
height: fit-content;
min-width: fit-content;
max-width: 14rem;
flex-grow: .3;
width: 10rem;
}
.toc {
max-height: 100%;
overflow-y: hidden;
height: 100%;
}
}
}
}
}
.page {
@media all and ($mobile) {
h1 {
margin-top: 0;
}
.darkmode {
padding-top: 0.5rem;
}
footer {
margin-bottom: 0;
}
}
}
// folder listing
.page {
& > #quartz-body {
& .page-listing {
& p {
font-size: 1rem;
}
& h3 {
font-size: 1rem;
}
& ul.section-ul {
margin-top: 0;
}
& li.section-li {
margin-bottom: 0;
}
}
}
}