From 84bbed79144a8cff2a765ea742d8b49122300d46 Mon Sep 17 00:00:00 2001 From: Jonathan Visser Date: Fri, 3 Jan 2025 13:26:40 +0100 Subject: [PATCH 1/2] Fix issue where code blocks dont properly respect page size width --- docs/_static/scss/components/defaults/_code.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/_static/scss/components/defaults/_code.scss b/docs/_static/scss/components/defaults/_code.scss index 2b4b730d..a74e0068 100644 --- a/docs/_static/scss/components/defaults/_code.scss +++ b/docs/_static/scss/components/defaults/_code.scss @@ -1,3 +1,5 @@ +@use "../../breakpoints" as *; + .rst-content section ul { line-height: auto; } @@ -48,6 +50,15 @@ code.docutils.literal.notranslate { border-radius: 8px; background-color: #292d3e; color: #D9E7F3; + width: min(900px, calc(100vw - 100px)); + + @media (min-width: $breakpoint-laptop) { + width: min(900px, calc(100vw - 600px)); + } + + @media (min-width: $breakpoint-landscape) { + width: min(900px, calc(100vw - 400px)); + } .c1 { color: var(--message-warning); From 3e8901970fa166c2be183bf90bec0704926ef79c Mon Sep 17 00:00:00 2001 From: Jonathan Visser Date: Fri, 3 Jan 2025 14:05:35 +0100 Subject: [PATCH 2/2] Revert to old page layout styling --- docs/_static/scss/components/_layout.scss | 82 +++++++++---------- docs/_static/scss/components/_module.scss | 6 +- .../scss/components/defaults/_code.scss | 9 -- docs/_templates/layout.html | 36 ++++---- 4 files changed, 56 insertions(+), 77 deletions(-) diff --git a/docs/_static/scss/components/_layout.scss b/docs/_static/scss/components/_layout.scss index d8e5d169..c89f57b0 100644 --- a/docs/_static/scss/components/_layout.scss +++ b/docs/_static/scss/components/_layout.scss @@ -5,25 +5,28 @@ } .wy-grid-for-nav { + display: grid; + grid-template-columns: 300px 900px 300px; + justify-content: center; + position: relative; margin-top: 80px; - max-width: 1500px; - margin: auto; - position: unset; - width: unset; - height: unset; - @media (min-width: $breakpoint-mobile) { - display: flex; + @media (max-width: $breakpoint-laptop) { + display: grid; + grid-template-columns: 300px 700px 200px; + justify-content: center; } -} -.wy-nav-content { - max-width: 100% !important; + @media (max-width: $breakpoint-width1200) { + grid-template-columns: 300px auto; + } + + @media (max-width: $breakpoint-landscape){ + display: block; + } } .wy-nav-content-wrap { - display: flex; - flex: 1 1 auto; background: #fcfcfc; @media (max-width: $breakpoint-landscape){ @@ -122,8 +125,7 @@ } .wy-nav-content { - display: flex; - max-width: 100% !important; + max-width: 1200px; padding: 20px; height: auto; @@ -207,23 +209,18 @@ } -.wy-grid-for-nav .wy-nav-side { +.wy-nav-side { position: sticky; top: 0; background: inherit; z-index: 10; - width: 0; - @media (max-width: $breakpoint-landscape - 1) { + @media (max-width: $breakpoint-landscape){ + width: 300px; left: -300px; } - - @media (min-width: $breakpoint-landscape) { - flex: 0 0 300px; - } - .wy-menu-vertical { - @media (max-width: $breakpoint-landscape - 1) { + @media (max-width: $breakpoint-landscape) { left: -300px; width: 300px; transition: 0.2s ease-in-out; @@ -368,41 +365,35 @@ } } -.aside-tiles { - display: none; - gap: 32px; - height: 100%; +.aside-tile { + display: flex; flex-direction: column; - flex: 0 0 300px; - font-size: 12px; - color: var(--blue); - text-align: left; - margin-bottom: 5px; + justify-content: center; align-items: center; + position: relative; + width: 100%; + height: max-content; + padding: 10px; - @media (min-width: $breakpoint-laptop) { - display: flex; - } - - &__cards { - position: fixed; - top: 150px; - } - - &__card { + &__container { border-radius: 5px; border: 1px solid var(--grey-border); + position: fixed; + top: 150px; background-color: #fff; width: 250px; height: max-content; padding: 20px 20px 10px 20px; - margin-bottom: 32px; @media (max-width: $breakpoint-laptop) { width: 179px; } } + &__feedback { + top: 350px; + } + &__content { display: flex; flex-direction: column; @@ -423,13 +414,12 @@ display: none; } - ul { + .aside-tile__feedback-list { font-size: 12px; color: var(--blue); text-align: left; margin-bottom: 5px; - li { line-height: 25px; @@ -438,6 +428,8 @@ color: var(--message-success); } } + + } } /* aside end */ diff --git a/docs/_static/scss/components/_module.scss b/docs/_static/scss/components/_module.scss index b12666de..377221be 100644 --- a/docs/_static/scss/components/_module.scss +++ b/docs/_static/scss/components/_module.scss @@ -5,9 +5,6 @@ @use "../breakpoints" as *; -header { - margin-bottom: 60px; -} .main-content a { color: var(--secondary-blue); @@ -46,7 +43,8 @@ header { } .rst-content { - padding: 20px 50px; + max-width: 900px; + padding: 0 50px; @media (max-width: $breakpoint-portrait) { padding: 0; diff --git a/docs/_static/scss/components/defaults/_code.scss b/docs/_static/scss/components/defaults/_code.scss index a74e0068..b0fabb04 100644 --- a/docs/_static/scss/components/defaults/_code.scss +++ b/docs/_static/scss/components/defaults/_code.scss @@ -50,15 +50,6 @@ code.docutils.literal.notranslate { border-radius: 8px; background-color: #292d3e; color: #D9E7F3; - width: min(900px, calc(100vw - 100px)); - - @media (min-width: $breakpoint-laptop) { - width: min(900px, calc(100vw - 600px)); - } - - @media (min-width: $breakpoint-landscape) { - width: min(900px, calc(100vw - 400px)); - } .c1 { color: var(--message-warning); diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html index c1b80516..4e8ec106 100644 --- a/docs/_templates/layout.html +++ b/docs/_templates/layout.html @@ -268,26 +268,24 @@ {%- endblock %} -