From 5e932b8b357ead07ac82c40838d25211633d2e99 Mon Sep 17 00:00:00 2001 From: Jonathan Visser Date: Thu, 2 Jan 2025 15:19:58 +0100 Subject: [PATCH 1/2] Modularize styling, and improve breakpoint responsiveness to page layout --- .../scss/components/_article-meta.scss | 23 + .../_static/scss/components/_breadcrumbs.scss | 58 +++ .../_layout.scss} | 490 ++---------------- docs/_static/scss/components/_module.scss | 58 +++ .../scss/components/defaults/_buttons.scss | 33 ++ .../scss/components/defaults/_code.scss | 84 +++ .../scss/components/defaults/_module.scss | 69 +++ .../scss/components/defaults/_notes.scss | 71 +++ docs/_static/scss/main.scss | 3 +- docs/_templates/layout.html | 36 +- 10 files changed, 466 insertions(+), 459 deletions(-) create mode 100644 docs/_static/scss/components/_article-meta.scss create mode 100644 docs/_static/scss/components/_breadcrumbs.scss rename docs/_static/scss/{_general.scss => components/_layout.scss} (56%) create mode 100644 docs/_static/scss/components/_module.scss create mode 100644 docs/_static/scss/components/defaults/_buttons.scss create mode 100644 docs/_static/scss/components/defaults/_code.scss create mode 100644 docs/_static/scss/components/defaults/_module.scss create mode 100644 docs/_static/scss/components/defaults/_notes.scss diff --git a/docs/_static/scss/components/_article-meta.scss b/docs/_static/scss/components/_article-meta.scss new file mode 100644 index 00000000..48c91a72 --- /dev/null +++ b/docs/_static/scss/components/_article-meta.scss @@ -0,0 +1,23 @@ +@use "../breakpoints" as *; + +.article-meta { + display: inline-block; + position: relative; + top: 30px; + font-size: 11px; + font-weight: 600; + opacity: 0.35; + + &--updated { + opacity: 0.5; + + &::after { + content: "•"; + padding-left: 5px; + } + } + + @media (max-width: $breakpoint-mobile) { + font-size: 12px; + } +} diff --git a/docs/_static/scss/components/_breadcrumbs.scss b/docs/_static/scss/components/_breadcrumbs.scss new file mode 100644 index 00000000..80d59c08 --- /dev/null +++ b/docs/_static/scss/components/_breadcrumbs.scss @@ -0,0 +1,58 @@ +@use "../breakpoints" as *; + +/* breadcrumbs*/ +.wy-breadcrumbs { + max-width: 1500px; + padding: 0 21px; + margin: auto; + + & li { + padding-top: initial; + } + + @media (max-width: $breakpoint-landscape) { + padding: 0 20px 0 60px; + overflow: auto; + white-space: nowrap; + } + + @media (max-width: $breakpoint-mobile) { + padding: 0 20px 0 65px; + } +} + +.wy-breadcrumbs, +.wy-breadcrumbs li a, +.wy-breadcrumbs-aside a { + font-size: 11px; +} +.wy-breadcrumbs li.wy-breadcrumbs-aside { + @media (max-width: $breakpoint-portrait) { + display: none; + } +} + +.wy-breadcrumbs li a:visited { + color: var(--light-orange); +} + +li.wy-breadcrumbs-aside a { + padding: 10px; +} + +.header { + height: 50px; + line-height: 50px; + width: 100%; + position: fixed; + top: 60px; + border-bottom: 1px solid var(--grey-border); + z-index:20; + background-color: white; + + @media (max-width: $breakpoint-mobile) { + top: 90px; + } +} + +/* header end */ \ No newline at end of file diff --git a/docs/_static/scss/_general.scss b/docs/_static/scss/components/_layout.scss similarity index 56% rename from docs/_static/scss/_general.scss rename to docs/_static/scss/components/_layout.scss index 626c2edc..5fa81979 100644 --- a/docs/_static/scss/_general.scss +++ b/docs/_static/scss/components/_layout.scss @@ -1,124 +1,29 @@ -@use "breakpoints" as *; - -h1, -h2, -h3, -h4, -span { - font-family: 'Montserrat', sans-serif; -} - -p { - @media (max-width: $breakpoint-portrait) { - font-size: 17px; - line-height: 26px; - } -} - -span, p, div { - color: #404040; -} - -a { - text-decoration: none; -} -a:hover:not(.logo-title) { - opacity: 0.7; -} -a:visited { - color: var(--primary-blue); -} -a.ahref-blue { - text-decoration: underline; - color: var(--primary-blue); -} -a.ahref-orange { - text-decoration: underline; - color: var(--primary-orange); -} - -.main-content a { - color: var(--secondary-blue); - text-decoration: underline; -} -.main-content a:visited { - opacity: 0.8; - color: var(--secondary-blue)!important; -} +@use "../breakpoints" as *; .wy-side-nav-search a:visited { color: white!important; } -h1 { - font-size: 40px; - line-height: inherit; - margin: 40px 0; -} - -h2 { - font-size: 32px; - line-height: 1.2em; - margin-top: 40px; - - @media (max-width: $breakpoint-portrait) { - font-size: 22px; - } -} - -section { - scroll-margin-top: 120px; -} - -#rtd-search-form { - input.main-search-bar__input { - position: relative; - top: 10px; - padding: 0 15px 0 30px; - - @media (max-width: $breakpoint-mobile) { - top: 0; - } - } - .search-icon{ - position: relative; - width: 13px; - top: -18px; - left: -132px; - - @media (max-width: $breakpoint-portrait) { - left: -83px; - } - @media (max-width: $breakpoint-mobile) { - top: -27px; - left: -149px; - } - } -} - .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 (max-width: $breakpoint-laptop) { - display: grid; - grid-template-columns: 300px 700px 200px; - justify-content: center; - } - - @media (max-width: $breakpoint-width1200) { - grid-template-columns: 300px auto; + @media (min-width: $breakpoint-mobile) { + display: flex; } +} - @media (max-width: $breakpoint-landscape){ - display: block; - } +.wy-nav-content { + max-width: 100% !important; } .wy-nav-content-wrap { + display: flex; + flex: 1 1 auto; background: #fcfcfc; @media (max-width: $breakpoint-landscape){ @@ -217,7 +122,8 @@ section { } .wy-nav-content { - max-width: 1200px; + display: flex; + max-width: 100% !important; padding: 20px; height: auto; @@ -300,18 +206,24 @@ section { } } -.wy-nav-side { + +.wy-grid-for-nav .wy-nav-side { position: sticky; top: 0; background: inherit; z-index: 10; - - @media (max-width: $breakpoint-landscape){ - width: 300px; + width: 0; + + @media (max-width: $breakpoint-landscape - 1) { left: -300px; } + + @media (min-width: $breakpoint-landscape) { + flex: 0 0 300px; + } + .wy-menu-vertical { - @media (max-width: $breakpoint-landscape) { + @media (max-width: $breakpoint-landscape - 1) { left: -300px; width: 300px; transition: 0.2s ease-in-out; @@ -367,145 +279,6 @@ section { background:rgb(220, 220, 220) } -.rst-content { - max-width: 900px; - padding: 0 50px; - - @media (max-width: $breakpoint-portrait) { - padding: 0; - } -} - -/* code blocks */ -.rst-content section ul { - line-height: auto; -} - -code, -pre, -pre span, -span.pre, -.rst-content .linenodiv pre, -.rst-content div[class^=highlight] pre, -.rst-content pre.literal-block { - font-family: 'Ubuntu Mono', monospace; -} - -ul.simple li code, -code.docutils.literal.notranslate { - border:none; - width: max-content; - font-size: 13px; - padding: 10px; - margin: 10px 0; - border-radius: 8px; - background: #292d3e; - - &.literal { - color: var(--aqua); - } -} -code.docutils.literal.notranslate { - background: #efefef; - padding: 2px 6px; - - &.literal { - color: var(--blue); - } -} - -.rst-content div.notranslate { - border: none; - - - .highlight { - font-family: 'Ubuntu Mono', monospace; - font-size: 16px; - padding: 10px; - line-height: 24px; - margin: 10px 0; - border-radius: 8px; - background-color: #292d3e; - color: #D9E7F3; - - .c1 { - color: var(--message-warning); - } - .mi, - .o, - .mf { - color: #e4e4e4; - } - - .s, - .n, - .nb, - .na, - .s1 { - color: var(--aqua); - } - - .s1 { - color: var(--light-orange); - } - - .k, - .nv, - .m, - .vg, - .p { - color: #D9E7F3; - } - } -} -.rst-content div.highlight pre { - font-size: 14px; -} - -/* code blocks end */ - -/* buttons next previous */ - .btn, - .btn-neutral { - background: #fff; - background-color: #fff!important; - border: 1px solid var(--primary-orange); - font-weight: 600; - font-size: 12px; - max-width: 110px; - padding: 0 15px; - color: var(--primary-orange)!important; - - .fa { - display: none; - } - - &:visited { - color: var(--primary-orange)!important; - } - &:hover { - opacity: 1; - } - } - .btn:active { - padding: 0 15px; - } - .rst-content .btn:focus { - outline: 0px solid; - } - - .btn-orange { - background-color: var(--primary-orange)!important; - color: #fff!important; - } - -/* buttons next previous end */ - -.rst-content p + ul { - margin-top: -14px; -} - -/* scrollbar */ .wy-menu { &::-webkit-scrollbar{ width: 10px; @@ -518,10 +291,6 @@ code.docutils.literal.notranslate { background-clip: content-box; } - /* scrollbar end */ - - /* sidebar */ - & li.toctree-l1.current>a { border-bottom: 0; border-top: 0; @@ -599,39 +368,41 @@ code.docutils.literal.notranslate { } } -/* sidebar end */ - - -/* aside */ -.aside-tile { - display: flex; +.aside-tiles { + display: none; + gap: 32px; + height: 100%; flex-direction: column; - justify-content: center; + flex: 0 0 300px; + font-size: 12px; + color: var(--blue); + text-align: left; + margin-bottom: 5px; align-items: center; - position: relative; - width: 100%; - height: max-content; - padding: 10px; - &__container { - border-radius: 5px; - border: 1px solid var(--grey-border); + @media (min-width: $breakpoint-laptop) { + display: flex; + } + + &__cards { position: fixed; top: 150px; + } + + &__card { + border-radius: 5px; + border: 1px solid var(--grey-border); 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; @@ -652,96 +423,25 @@ code.docutils.literal.notranslate { display: none; } - .aside-tile__feedback-list { + ul { font-size: 12px; color: var(--blue); text-align: left; margin-bottom: 5px; + li { line-height: 25px; - + i { margin-right: 5px; color: var(--message-success); } } - - } } /* aside end */ -/*notes (admonition notes)*/ -.rst-content { - .note, - .attention, - .caution, - .danger, - .error, - .hint, - .important, - .tip, - .warning { - padding: 25px 20px 20px 40px; - margin: 20px 0; - border-radius: 4px; - - .admonition-title { - background: transparent; - font-size: 16px; - } - - p, - a { - font-size: 13px; - } - } - - .note { - background: var(--message-info-bg); - p { - color: var(--message-info-text); - } - .admonition-title { - color: var(--message-info-text); - } - } - .attention, - .caution, - .warning, - .important { - background: var(--message-warning-bg); - p { - color: var(--message-warning-text); - } - .admonition-title { - color: var(--message-warning-text); - } - } - .danger, - .error { - background: var(--message-danger-bg); - p { - color: var(--message-danger-text); - } - .admonition-title { - color: var(--message-danger-text); - } - } - .hint, - .tip { - background: var(--message-success-bg); - p { - color: var(--message-success-text); - } - .admonition-title { - color: var(--message-success-text); - } - } -} - -/* notes (admonition notes) end */ /* header*/ .wy-side-nav-search img { @@ -834,98 +534,6 @@ code.docutils.literal.notranslate { } /*header end*/ -/* breadcrumbs*/ -.wy-breadcrumbs { - max-width: 1461px; - margin: auto; - - & li { - padding-top: initial; - } - - @media (max-width: $breakpoint-laptop) { - max-width: 1160px; - } - - @media (max-width: $breakpoint-width1200) { - max-width: none; - margin: 0 20px; - } - - @media (max-width: $breakpoint-landscape) { - max-width: none; - margin: 0 20px 0 60px; - width: 100%; - max-width: calc(100% - 90px); - overflow: auto; - white-space: nowrap; - } - - @media (max-width: $breakpoint-mobile) { - margin: 0 20px 0 65px; - } -} - -.wy-breadcrumbs, -.wy-breadcrumbs li a, -.wy-breadcrumbs-aside a { - font-size: 11px; -} -.wy-breadcrumbs li.wy-breadcrumbs-aside { - @media (max-width: $breakpoint-portrait) { - display: none; - } -} - -.wy-breadcrumbs li a:visited { - color: var(--light-orange); -} - -li.wy-breadcrumbs-aside a { - padding: 10px; -} - -.header { - height: 50px; - line-height: 50px; - width: 100%; - position: fixed; - top: 60px; - border-bottom: 1px solid var(--grey-border); - z-index:20; - background-color: white; - - @media (max-width: $breakpoint-mobile) { - top: 90px; - } -} - -/* header end */ - -/* article meta */ -.article-meta { - display: inline-block; - position: relative; - top: 30px; - font-size: 11px; - font-weight: 600; - opacity: 0.35; - - &--updated { - opacity: 0.5; - - &::after { - content: "•"; - padding-left: 5px; - } - } - - @media (max-width: $breakpoint-mobile) { - font-size: 12px; - } -} - -/* article meta end */ /* footer */ .edit { diff --git a/docs/_static/scss/components/_module.scss b/docs/_static/scss/components/_module.scss new file mode 100644 index 00000000..864f17dc --- /dev/null +++ b/docs/_static/scss/components/_module.scss @@ -0,0 +1,58 @@ +@use "defaults/module"; +@use "layout"; +@use "article-meta"; +@use "breadcrumbs"; + +@use "../breakpoints" as *; + +header { + margin-bottom: 60px; +} + +.main-content a { + color: var(--secondary-blue); + text-decoration: underline; +} + +.main-content a:visited { + opacity: 0.8; + color: var(--secondary-blue)!important; +} + +#rtd-search-form { + input.main-search-bar__input { + position: relative; + top: 10px; + padding: 0 15px 0 30px; + + @media (max-width: $breakpoint-mobile) { + top: 0; + } + } + .search-icon{ + position: relative; + width: 13px; + top: -18px; + left: -132px; + + @media (max-width: $breakpoint-portrait) { + left: -83px; + } + @media (max-width: $breakpoint-mobile) { + top: -27px; + left: -149px; + } + } +} + +.rst-content { + padding: 20px 50px; + + @media (max-width: $breakpoint-portrait) { + padding: 0; + } +} + +.rst-content p + ul { + margin-top: -14px; +} \ No newline at end of file diff --git a/docs/_static/scss/components/defaults/_buttons.scss b/docs/_static/scss/components/defaults/_buttons.scss new file mode 100644 index 00000000..7debfce9 --- /dev/null +++ b/docs/_static/scss/components/defaults/_buttons.scss @@ -0,0 +1,33 @@ +.btn, +.btn-neutral { + background: #fff; + background-color: #fff!important; + border: 1px solid var(--primary-orange); + font-weight: 600; + font-size: 12px; + max-width: 110px; + padding: 0 15px; + color: var(--primary-orange)!important; + + .fa { + display: none; + } + + &:visited { + color: var(--primary-orange)!important; + } + &:hover { + opacity: 1; + } +} +.btn:active { + padding: 0 15px; +} +.rst-content .btn:focus { + outline: 0px solid; +} + +.btn-orange { + background-color: var(--primary-orange)!important; + color: #fff!important; +} diff --git a/docs/_static/scss/components/defaults/_code.scss b/docs/_static/scss/components/defaults/_code.scss new file mode 100644 index 00000000..2b4b730d --- /dev/null +++ b/docs/_static/scss/components/defaults/_code.scss @@ -0,0 +1,84 @@ +.rst-content section ul { + line-height: auto; +} + +code, +pre, +pre span, +span.pre, +.rst-content .linenodiv pre, +.rst-content div[class^=highlight] pre, +.rst-content pre.literal-block { + font-family: 'Ubuntu Mono', monospace; +} + +ul.simple li code, +code.docutils.literal.notranslate { + border:none; + width: max-content; + font-size: 13px; + padding: 10px; + margin: 10px 0; + border-radius: 8px; + background: #292d3e; + + &.literal { + color: var(--aqua); + } +} +code.docutils.literal.notranslate { + background: #efefef; + padding: 2px 6px; + + &.literal { + color: var(--blue); + } +} + +.rst-content div.notranslate { + border: none; + + + .highlight { + font-family: 'Ubuntu Mono', monospace; + font-size: 16px; + padding: 10px; + line-height: 24px; + margin: 10px 0; + border-radius: 8px; + background-color: #292d3e; + color: #D9E7F3; + + .c1 { + color: var(--message-warning); + } + .mi, + .o, + .mf { + color: #e4e4e4; + } + + .s, + .n, + .nb, + .na, + .s1 { + color: var(--aqua); + } + + .s1 { + color: var(--light-orange); + } + + .k, + .nv, + .m, + .vg, + .p { + color: #D9E7F3; + } + } +} +.rst-content div.highlight pre { + font-size: 14px; +} diff --git a/docs/_static/scss/components/defaults/_module.scss b/docs/_static/scss/components/defaults/_module.scss new file mode 100644 index 00000000..746f0c96 --- /dev/null +++ b/docs/_static/scss/components/defaults/_module.scss @@ -0,0 +1,69 @@ +@use "code"; +@use "buttons"; +@use "notes"; + +@use "../../breakpoints" as *; + +h1, +h2, +h3, +h4, +span { + // TODO: Put on body + font-family: 'Montserrat', sans-serif; +} + +span, p, div { + // TODO: Put on body + color: #404040; +} + +p { + @media (max-width: $breakpoint-portrait) { + font-size: 17px; + line-height: 26px; + } +} + +a { + text-decoration: none; + + &:hover:not(.logo-title) { + // TODO: Make more reusable + opacity: 0.7; + } + + &:visited { + color: var(--primary-blue); + } + + &.ahref-blue { + text-decoration: underline; + color: var(--primary-blue); + } + + &.ahref-orange { + text-decoration: underline; + color: var(--primary-orange); + } +} + +h1 { + font-size: 40px; + line-height: inherit; + margin: 40px 0; +} + +h2 { + font-size: 32px; + line-height: 1.2em; + margin-top: 40px; + + @media (max-width: $breakpoint-portrait) { + font-size: 22px; + } +} + +section { + scroll-margin-top: 120px; +} \ No newline at end of file diff --git a/docs/_static/scss/components/defaults/_notes.scss b/docs/_static/scss/components/defaults/_notes.scss new file mode 100644 index 00000000..b6fbdc4c --- /dev/null +++ b/docs/_static/scss/components/defaults/_notes.scss @@ -0,0 +1,71 @@ + +/*notes (admonition notes)*/ +.rst-content { + .note, + .attention, + .caution, + .danger, + .error, + .hint, + .important, + .tip, + .warning { + padding: 25px 20px 20px 40px; + margin: 20px 0; + border-radius: 4px; + + .admonition-title { + background: transparent; + font-size: 16px; + } + + p, + a { + font-size: 13px; + } + } + + .note { + background: var(--message-info-bg); + p { + color: var(--message-info-text); + } + .admonition-title { + color: var(--message-info-text); + } + } + .attention, + .caution, + .warning, + .important { + background: var(--message-warning-bg); + p { + color: var(--message-warning-text); + } + .admonition-title { + color: var(--message-warning-text); + } + } + .danger, + .error { + background: var(--message-danger-bg); + p { + color: var(--message-danger-text); + } + .admonition-title { + color: var(--message-danger-text); + } + } + .hint, + .tip { + background: var(--message-success-bg); + p { + color: var(--message-success-text); + } + .admonition-title { + color: var(--message-success-text); + } + } +} + +/* notes (admonition notes) end */ \ No newline at end of file diff --git a/docs/_static/scss/main.scss b/docs/_static/scss/main.scss index 7ff0f9ab..4f40e162 100644 --- a/docs/_static/scss/main.scss +++ b/docs/_static/scss/main.scss @@ -1,3 +1,4 @@ @use "breakpoints"; @use "colors"; -@use "general"; + +@use "components/module"; diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html index 4e8ec106..c1b80516 100644 --- a/docs/_templates/layout.html +++ b/docs/_templates/layout.html @@ -268,24 +268,26 @@ {%- endblock %} -