From 69f191847c6667a61c2a83ce63ef02650c262e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Sun, 29 Jun 2025 17:26:31 +0200 Subject: [PATCH] Update layout to new Quartz version --- custom/docker-compose.yml | 2 - quartz/styles/custom.scss | 465 +++++++++++++++++++++++--------------- 2 files changed, 289 insertions(+), 178 deletions(-) diff --git a/custom/docker-compose.yml b/custom/docker-compose.yml index c13013e..0357ea5 100644 --- a/custom/docker-compose.yml +++ b/custom/docker-compose.yml @@ -1,5 +1,3 @@ -version: '3.4' - services: quartz: image: quartz-jpg diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index c0fe363..6e8397a 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -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; + } + } + } } \ No newline at end of file