From 72b50e274a106e84b69ae9153db80017301d091f Mon Sep 17 00:00:00 2001 From: Kattni Date: Sun, 14 Dec 2025 23:50:56 -0500 Subject: [PATCH 01/21] Initial changes. --- docs/config.yml | 2 + docs/en/SUMMARY.md | 8 +- .../assets/stylesheets/beeware_theme.css | 587 +++++++++--------- .../overrides/partials/header.html | 169 +++-- .../overrides/partials/nav.html | 2 + 5 files changed, 435 insertions(+), 333 deletions(-) diff --git a/docs/config.yml b/docs/config.yml index 0939a6f..c1c9414 100644 --- a/docs/config.yml +++ b/docs/config.yml @@ -53,6 +53,8 @@ theme: - toc.follow - navigation.indexes - navigation.footer + - navigation.tabs + - navigation.tabs.sticky - search.suggest - search.highlight - search.share diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index 2b4f6a2..2be4dfc 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -1,11 +1,11 @@ -- BeeWare Docs Tools Demo section one - - [BeeWare Docs Tools Demo section one](section_one/index.md) +- Section one + - [Section one](section_one/index.md) - [Section one - page two](section_one/page_two.md) - [Section two](section_two/index.md) - [Section three](section_three/index.md) - ./section_three/* -- Shared content test bed - - [Shared content test bed](content_test_bed/index.md) +- Shared content testbed + - [Shared content testbed](content_test_bed/index.md) - How-to guides - Contribute - [Contributing](content_test_bed/how-to/contribute/index.md) diff --git a/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css b/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css index e8813f0..3575c5d 100644 --- a/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css +++ b/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css @@ -4,328 +4,362 @@ src: url("../fonts/Cutive.woff2"); } -/*---------------------------------------------------- - Build BeeWare header - --------------------------------------------------- */ -.navbar { - font-family: 'Cutive', serif; - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 15px 16px 8px 16px; - line-height: 1.5; +:root { + color-scheme: light dark; } -.navbar > .container, -.navbar > .container-fluid { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; +[data-md-color-primary=indigo] { + --md-primary-fg-color: #343A40; + --md-primary-fg-color--light: #343A40; + --md-primary-fg-color--dark: #343A40; } -.navbar-dark .navbar-brand { - color: white; +/* The theme setting the font size on the body is an accessibility issue. */ +body { + font-size: 1rem; } -.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { - color: white; +/* Disable header shadow */ +.md-header--shadow { + box-shadow: unset; } -.navbar-dark .navbar-nav .nav-link { - color: rgba(255, 255, 255, 0.5); +.md-header__topic, nav.md-tabs { + font-family: Cutive, serif; } -.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { - color: rgba(255, 255, 255, 0.75); +nav.md-tabs, .md-header { + background-color: var(--md-primary-fg-color); } -.navbar-dark .navbar-nav .nav-link.disabled { - color: rgba(255, 255, 255, 0.25); +.md-header { + position: unset; } -.navbar-dark .navbar-nav .show > .nav-link, -.navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.show, -.navbar-dark .navbar-nav .nav-link.active { - color: white; +.md-header__option > input { + bottom: unset; } -.navbar-dark .navbar-toggler { - color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.1); +[dir="ltr"] .md-header__title { + margin-left: 0; } -.navbar-dark .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); +.md-header__topic { + position: unset; + transition: unset; } -.navbar-dark .navbar-text { - color: rgba(255, 255, 255, 0.5); +/* Search */ +input.md-search__input, .md-search__suggest, .md-search-result__meta { + font-family: 'Cutive', serif; } -.navbar-dark .navbar-text a { - color: white; +/* Link colors */ +.md-typeset a, .md-nav__link { + color: light-dark(#084AFF, #526CFE); } -.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { - color: white; +.md-nav__item .md-nav__link--active { + color: light-dark(#30314B, #96ACEE); } -.bg-dark { - background-color: #343a40 !important; +.md-typeset h1, +.md-typeset h2, +.md-typeset h3, +.md-typeset h4, +.md-typeset h5, +.md-typeset h6 { + font-family: 'Cutive', serif; + color: var(--md-typeset-color); } -@media (max-width: 862.99px) { - .navbar-collapse li { - border-bottom: 1px solid #666; - padding: 8px 16px 6.4px; - } +.md-main__inner { + margin-top: unset; +} - .navbar { - padding: 0 !important; - } +.intro-index { + background-color: light-dark(#E9ECEF, #282D32); + margin-top: -2rem; + padding: 2rem 0 1rem 0; + border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; +} - .navbar-brand-block { - position: absolute; - margin-top: -40px; - padding: 1px 14px 2px; - right: 10px; - } +.subtitle-index { + font-size: 1.8rem; + font-family: Cutive, serif; +} - .nav-top { - margin: 16px 14px; - } +h1.title-index a.headerlink, +.page-index h2 a.headerlink, +.page-index h4 a.headerlink { + display: none; +} - .navbar-collapse { - background-color: #343a40; - padding-top: 12px; - } +/*.summary-index {*/ +/*}*/ + +.behaving-index { + display: flex; + justify-content: center; +} - .navbar-collapse .header-button li.nav-item { - border-bottom: 0 +@media screen and (min-width: 690px) { + .intro-block-index { + display: flex; + justify-content: center; } - .navbar-collapse .header-button { - border-bottom: 1px solid #666; + .buttons-index { + display: flex; + flex-direction: row; + justify-content: center; } - .navbar-expand-md > .container, - .navbar-expand-md > .container-fluid { - padding-right: 0; - padding-left: 0; + .intro-content-index { + display: flex; + flex-basis: min-content; + flex-direction: column; + align-items: unset; /* TODO: REMOVE */ + width: unset; /* TODO: REMOVE */ } -} -@media (min-width: 863px) { - .navbar-expand-md { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; - justify-content: flex-start; + .sidebar-index { + display: flex; + flex-direction: column; + flex: 30%; + padding: 15px; + background-color: light-dark(#E9ECEF, #282D32); + height: fit-content; + border-radius: 15px; + margin: 1.5rem 0 0 0.5rem; } - .navbar-expand-md .navbar-nav { - -ms-flex-direction: row; + .page-index { + display: flex; flex-direction: row; - font-size: 16px; - padding-left: 14px; } - .navbar-expand-md .navbar-nav .dropdown-menu { - position: absolute; + .content-index { + flex: 70%; + margin-right: 10px; } - .navbar-expand-md .navbar-nav .nav-link { - padding-right: 8px; - padding-left: 8px; + .beeware-logo-index { + float: left; + padding-left: 2rem; } - .navbar-expand-md > .container, - .navbar-expand-md > .container-fluid { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + h1.title-index { + font-size: 6rem; + margin-bottom: 0; } - .navbar-expand-md .navbar-collapse { - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - height: 42.9px; + a.contribute-content-button, + a.keep-content-button { + display: inline-block; + width: 25rem; } +} - .navbar-expand-md .navbar-toggler { - display: none; +/* This specific width is where the BeeWare title on the homepage needs to be made + smaller. It also works for the buttons at the bottom of the homepage. */ +@media screen and (max-width: 760px) { + h1.title-index { + font-size: 4rem; + margin-bottom: 0; } - .navbar-brand-block { - padding-top: 2px; + a.contribute-content-button, + a.keep-content-button { + display: inline-block; + width: 15rem; } +} - /* Search and header light-dark mode button are too low by default on wide screen */ - .md-search, .md-header__button[for="__search"] { - margin-top: -7.2px; +@media screen and (max-width: 1164px) { + .page-index { + display: unset; + flex-direction: unset; } } -.fixed-top { - position: relative; - top: 0; - right: 0; - left: 0; - z-index: 1030; +@media screen and (max-width: 1220px) { + .beeware-logo-index { + width: 200px; + } } -.navbar-toggler { - padding: 4px 12px 4px 12px; - font-size: 16px; - line-height: 1; - background-color: transparent; - border: 1px solid transparent; - border-radius: 4px; - margin-left: 2px; -} +@media screen and (max-width: 926px) { + .buttons-index { + display: flex; + flex-direction: column; + justify-content: right; + } -.navbar-toggler:hover, .navbar-toggler:focus { - text-decoration: none; -} + .sidebar-index { + display: flex; + flex-direction: column; + flex: 20%; + margin: 30px; + padding: 15px; + background-color: #e1e1e1; + height: fit-content; + border-radius: 10px; + } -.navbar-toggler:not(:disabled):not(.disabled) { - cursor: pointer; + .content-index { + flex: 80%; + margin-right: 10px; + } + + .beeware-logo-index { + width: 100px; + } } -.navbar-toggler-icon { - display: inline-block; - width: 30px; - height: 30px; - vertical-align: middle; - content: ""; - background: no-repeat center center; - background-size: 100% 100%; +.clearfix { + clear: both; + display: block; + height: 0; + visibility: hidden; } -.navbar-brand { +a.tutorial-button, +a.contribute-button, +a.donate-button { + padding: .5rem 1rem; + margin: 0 0.5rem 0 0; + font-size: 1rem; + line-height: 1.5; + border-radius: .3rem; display: inline-block; - padding: 3px 2px 5px 0; - font-size: 20px; - line-height: inherit; + font-weight: 400; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + text-align: center; white-space: nowrap; - text-decoration: none; -} - -.navbar-brand:hover, .navbar-brand:focus { - text-decoration: none; -} - -.navbar-brand img { - max-width: initial; - margin-right: 8px; - margin-left: 8px; vertical-align: middle; + border: 1px solid transparent; + color: #FFFFFF; + background-color: #007BFF; } -.navbar-collapse { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-align: center; - align-items: center; -} - -.navbar-nav { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - padding-left: 0; - margin-top: 0; - margin-bottom: 3px; - list-style: none; -} - -.navbar-nav .nav-link { - padding-right: 0; - padding-left: 0; - text-decoration: none; -} - -.navbar-nav .dropdown-menu { - position: static; - float: none; -} - -.mr-auto, -.mx-auto { - margin-right: auto; -} - -.collapse:not(.show) { - display: none; -} - -/*---------------------------------------------------- - Material CSS overrides - --------------------------------------------------- */ -:root { - color-scheme: light dark; +a.donate-button { + background-color: #28A745; } -[data-md-color-primary=indigo] { - --md-primary-fg-color: #343A40; - --md-primary-fg-color--light: #343A40; - --md-primary-fg-color--dark: #343A40; +a.tutorial-button:hover, +a.contribute-button:hover, +a.contribute-content-button:hover { + color: #FFFFFF; + background-color: #0069D9; + border-color: #0062CC; } -.md-typeset h1, -.md-typeset h2, -.md-typeset h3, -.md-typeset h4, -.md-typeset h5, -.md-typeset h6 { - font-family: 'Cutive', serif; - color: var(--md-typeset-color); +a.donate-button:hover, +a.keep-content-button:hover { + color: #FFFFFF; + background-color: #218838; + border-color: #1e7e34;; } -/* Fix issue with spacing when title is exactly the width of the article column */ -.md-typeset h1 a.headerlink { - display: none; -} - -/* Link colors */ -.md-typeset a, .md-nav__link { - color: light-dark(#084AFF, #526CFE); +.python-logo-index, +.native-logo-index, +.opensource-logo-index, +.diversity-logo-index { + float: right; } -.md-nav__item .md-nav__link--active { - color: light-dark(#30314B, #96ACEE) +.cross-platform-logo-index, +.brutus-content-logo-index, +.hands-logo-index { + float: left; } -/* Unsticky header, add margin to deal with sidebar top margin changes */ -.md-header { - position: unset; +.content-button { + display: flex; + justify-content: center; } -/* Disable header shadow */ -.md-header--shadow { - box-shadow: unset; -} +a.contribute-content-button, +a.keep-content-button { + padding: .5rem 1rem; + margin: 0 0.5rem 0 0; + font-size: 1rem; + line-height: 1.5; + border-radius: .3rem; + font-weight: 400; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + text-align: center; + border: 1px solid transparent; + color: #FFFFFF; + background-color: #007BFF; +} + +a.keep-content-button { + background-color: #28A745; +} + +/* Future documentation page CSS */ +/*.featured {*/ +/* display: flex;*/ +/* flex-direction: row;*/ +/*}*/ + +/*.toga,*/ +/*.briefcase {*/ +/* display: flex;*/ +/* flex-direction: column;*/ +/* align-items: center;*/ +/* text-align: center;*/ +/* width: 50%;*/ +/*}*/ + +/*.featured-logo {*/ +/* width: 150px;*/ +/* display: inline-block;*/ +/*}*/ + +/*h2.featured-name {*/ +/* margin-top: 0;*/ +/*}*/ + +/*.other-tools-package {*/ +/* display: flex;*/ +/* flex-direction: row;*/ +/* align-items: center;*/ +/*}*/ + +/*h4#podium.podium-name {*/ +/* width: 7rem;*/ +/* margin-left: 20px;*/ +/*}*/ + +/*h4#rubicon-objective-c.rubicon-name {*/ +/* width: 8rem;*/ +/* margin-left: 20px;*/ +/*}*/ + +/*h4#python-apple-support.python-apple-name,*/ +/*h4#chaquopy.chaquopy-name {*/ +/* width: 12rem;*/ +/* margin-left: 20px;*/ +/*}*/ + +/*.other-tools-logo {*/ +/* display: inline-block;*/ +/* width: 40px;*/ +/*}*/ + +/*!* Alignment fix on description text for Other tools *!*/ +/*div[class*="-info"] {*/ +/* padding-top: 3px;*/ +/*}*/ + +/*.podium-info {*/ +/* margin-left: 2px;*/ +/*}*/ -/* Force admonitions to render at the same font size as the rest of the content */ -.md-typeset .admonition { - font-size: unset; -} /* Sidebar title and GitHub links font and color */ .md-nav__title { @@ -336,13 +370,6 @@ color: unset; } -.md-select:focus-within .md-select__inner, -.md-select:hover .md-select__inner, -.md-select__inner, -.md-select__list { - max-height: none; -} - /* Version number */ .version-number { overflow-wrap: anywhere; @@ -527,49 +554,43 @@ and (min-width: 1600px) { } } -/* Setting the font size on the body is an accessibility issue, as well as interfering - with the header font size. This resolves both. */ -body { - font-size: 1rem; -} - /* Removes padding and margins to regain screen-space on pages with short content. There is JS setting `top: 68px` on the sidebars that is eating up a huge amount of space. Overriding `top` causes a significant gap at the bottom between the end of the sidebar and the footer. Therefore the following margin changes are needed. */ -.md-main__inner { - margin-top: 0; - padding-top: 12px; -} - -.md-header { - margin-bottom: 72px; -} - -.md-sidebar { - padding-top: 12px; -} - -.md-content__inner { - padding-top: 8px; - margin-top: -69px; -} - -.md-content__inner::before { - height: 0; -} - -.md-footer { - position: relative; - margin-top: 69px; -} - -@media screen and (min-width: 60em) { - .md-sidebar__scrollwrap { - margin-top: -64px; - } -} +/*.md-main__inner {*/ +/* margin-top: 0;*/ +/* padding-top: 12px;*/ +/*}*/ + +/*.md-header {*/ +/* margin-bottom: 72px;*/ +/*}*/ + +/*.md-sidebar {*/ +/* padding-top: 12px;*/ +/*}*/ + +/*.md-content__inner {*/ +/* padding-top: 8px;*/ +/* margin-top: -69px;*/ +/*}*/ + +/*.md-content__inner::before {*/ +/* height: 0;*/ +/*}*/ + +/*.md-footer {*/ +/* position: relative;*/ +/* margin-top: 69px;*/ +/*}*/ + +/*@media screen and (min-width: 60em) {*/ +/* .md-sidebar__scrollwrap {*/ +/* margin-top: -64px;*/ +/* }*/ +/*}*/ /* Fix "Made with" hover link color in light mode */ html .md-footer-meta.md-typeset a:hover { @@ -607,7 +628,7 @@ readthedocs-docdiff { } /* Forces only highlighting the important bits of codeblocks */ -.highlight .gp, .highlight .go { +.highlight .gp, .highlight .go, .highlight .w { user-select: none; -webkit-user-select: none; } diff --git a/src/beeware_docs_tools/overrides/partials/header.html b/src/beeware_docs_tools/overrides/partials/header.html index 250c25c..befab2f 100644 --- a/src/beeware_docs_tools/overrides/partials/header.html +++ b/src/beeware_docs_tools/overrides/partials/header.html @@ -1,47 +1,138 @@ -
+ +{% import "partials/tabs-item.html" as item with context %} + +{% set class = "md-header" %} +{% if "navigation.tabs.sticky" in features %} + {% set class = class ~ " md-header--shadow md-header--lifted" %} +{% elif "navigation.tabs" not in features %} + {% set class = class ~ " md-header--shadow" %} +{% endif %} + + +
+ + + {% if config.theme.palette %} + {% if not config.theme.palette is mapping %} {% include "partials/palette.html" %} + {% endif %} + {% endif %} - {% include "partials/javascripts/palette.html" %} - + {% if not config.theme.palette is mapping %} + {% include "partials/javascripts/palette.html" %} + {% endif %} {% if config.extra.alternate %} {% include "partials/alternate.html" %} {% endif %} + {% if "material/search" in config.plugins %} {% set search = config.plugins["material/search"] | attr("config") %} @@ -57,19 +148,5 @@ {% include "partials/search.html" %} {% endif %} {% endif %} - - -
- - -
- {{ config.site_name }} -
-
- {{ config.extra.version }} -
-
+
diff --git a/src/beeware_docs_tools/overrides/partials/nav.html b/src/beeware_docs_tools/overrides/partials/nav.html index 46086db..1305d12 100644 --- a/src/beeware_docs_tools/overrides/partials/nav.html +++ b/src/beeware_docs_tools/overrides/partials/nav.html @@ -57,6 +57,7 @@ + {% if not config.extra.hide_dev_links %}
@@ -69,6 +70,7 @@
+ {% endif %} From 4f9b63707120165b28e5d951eb5f5e441ac1d437 Mon Sep 17 00:00:00 2001 From: Kattni Date: Mon, 15 Dec 2025 01:55:35 -0500 Subject: [PATCH 02/21] Translate fixes, CSS updates. --- docs/config.yml | 2 +- .../assets/stylesheets/beeware_theme.css | 57 ++++++++++--------- .../overrides/partials/header.html | 10 ++-- .../en/contribute/how/build_docs.md | 2 +- 4 files changed, 38 insertions(+), 33 deletions(-) diff --git a/docs/config.yml b/docs/config.yml index c1c9414..e4465af 100644 --- a/docs/config.yml +++ b/docs/config.yml @@ -19,7 +19,7 @@ extra: min_python_version_tag: "310" # The tag version of the minimum python version recent_python_version: "3.13" # The newest Python version known to work on all platforms docs_python_version: "3.13" # The version of Python required to build the documentation - translated: false # true hides content related to building translations. Default: false. + translated: true # false hides content related to building translations. Default: false. hide_coverage: false # true hides content related to code coverage. Default: false. macos_only: false # true hides tabbed content, and displays only macOS instructions. Default: false. alternate: diff --git a/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css b/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css index 3575c5d..a1b1114 100644 --- a/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css +++ b/src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css @@ -34,6 +34,11 @@ nav.md-tabs, .md-header { .md-header { position: unset; + display: flex; +} + +.md-header__inner { + margin-left: 0; } .md-header__option > input { @@ -559,38 +564,38 @@ and (min-width: 1600px) { of space. Overriding `top` causes a significant gap at the bottom between the end of the sidebar and the footer. Therefore the following margin changes are needed. */ -/*.md-main__inner {*/ -/* margin-top: 0;*/ -/* padding-top: 12px;*/ -/*}*/ +.md-main__inner { + margin-top: 0; + padding-top: 12px; +} -/*.md-header {*/ -/* margin-bottom: 72px;*/ -/*}*/ +.md-header { + margin-bottom: 49px; +} -/*.md-sidebar {*/ -/* padding-top: 12px;*/ -/*}*/ +.md-sidebar { + padding-top: 12px; +} -/*.md-content__inner {*/ -/* padding-top: 8px;*/ -/* margin-top: -69px;*/ -/*}*/ +.md-content__inner { + padding-top: 8px; + margin-top: -54px; +} -/*.md-content__inner::before {*/ -/* height: 0;*/ -/*}*/ +.md-content__inner::before { + height: 0; +} -/*.md-footer {*/ -/* position: relative;*/ -/* margin-top: 69px;*/ -/*}*/ +.md-footer { + position: relative; + margin-top: 69px; +} -/*@media screen and (min-width: 60em) {*/ -/* .md-sidebar__scrollwrap {*/ -/* margin-top: -64px;*/ -/* }*/ -/*}*/ +@media screen and (min-width: 60em) { + .md-sidebar__scrollwrap { + margin-top: -54px; + } +} /* Fix "Made with" hover link color in light mode */ html .md-footer-meta.md-typeset a:hover { diff --git a/src/beeware_docs_tools/overrides/partials/header.html b/src/beeware_docs_tools/overrides/partials/header.html index befab2f..a428f84 100644 --- a/src/beeware_docs_tools/overrides/partials/header.html +++ b/src/beeware_docs_tools/overrides/partials/header.html @@ -59,7 +59,7 @@ title="{{ config.site_name | e }}">
- {{ config.site_name }} + BeeWare
@@ -67,10 +67,10 @@