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 2b4b730d..b0fabb04 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; } 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 %} -