Update sidebar and footer navigation behavior to regain screen real estate

docs/en/index.md

@@ -2,34 +2,43 @@
 
 ## Theme checklist
 
-Things to manually check:
+This demo is designed to test the various features of the BeeWare
+MkDocs Material theme overrides. Please read through and verify
+that everything listed on this and the following pages is present
+and functioning as detailed in the description.
 
-### Titlebar
+## Titlebar
 
 A medium-gray titlebar is on the page. This the theme template
 has been applied.
 
-### Header and logo icons
+## Header icon
 
 The header icon top-left has been rendered. This confirms the template
 can reference external resources.
 
-The logo icon in the left sidebar has been rendered. This confirms the
-sidebar will render properly on the target sites.
+## Homepage sidebar icon
 
-### Heading font
+The logo icon in the left sidebar has been rendered. The logo should be
+the width of, and of equal height to, the sidebar. The site title should
+be rendered below it in slightly larger font than the rest of the
+sidebar, with the version number below it in smaller font.
+
+This confirms the sidebar will render properly on the target sites.
+
+## Heading font
 
 Headings are rendered in Cutive. This confirms the BeeWare custom CSS
 theme has been applied.
 
-### Inline Code
+## Inline code
 
 Inline code is rendered in the same color as the surrounding font. This
 confirms that the theme has not caused any undesired changes.
 
 This is text with `inline code` here and `inline code` here.
 
-### Tabbed Content Code
+## Tabbed content code
 
 Code is in a contrasting color to the background. Copy button should
 copy only the commands; the prompt should not be included.
@@ -61,7 +70,7 @@ C:\...>git clone https://github.com/beeware/beeware-theme.git
 
 ///
 
-### Code copy button behavior
+## Code copy button behavior
 
 The copy button on the following codeblock should result in `from pathlib
 import Path` being copied to the clipboard.
@@ -81,14 +90,14 @@ docs			pyproject.toml		requirements.docs.txt
 LICENSE			README.md		src
 ```
 
-### Sidebar links
+## Sidebar links
 
 Sidebar links exist, and point to the `beeware-docs-tools` repo. This
 confirms that the sidebar content has been loaded, and the `project-name`
 has been set in the MkDocs configuration file, and the version number is
 computed and added.
 
-### Link colors
+## Link colors
 
 This link to [the main BeeWare website](https://beeware.org) should be blue
 in *both* light mode and dark mode.
@@ -98,7 +107,7 @@ The links in the left and right sidebars should also be blue in both modes.
 When scrolling down the page, the active header link in the right sidebar
 should be light blue in dark mode, and darker blue in light mode.
 
-### Translation Admonition
+## Translation admonition
 
 The English-language version of this document should show the "Translations
 are available" admonition below. The French translation should show the "This is
@@ -143,7 +152,7 @@ machine translation, or not translated at all.
 
 {% endif %}
 
-### Custom 404 page
+## Custom 404 page
 
 Add `nopage` to the end of the URL in your browser to verify the 404
 page contains two flying bees, and the text "Brutus can't find what
@@ -152,7 +161,7 @@ you're looking for" below.
 *MkDocs builds fail with unrecognized internal links, so you need to
 manually verify this check by modifying the URL in your browser.*
 
-### Next Checks
+## Next checks
 
 The following link should take you to BeeWare Docs Tools Demo Section
 One. It is included to verify cross-page linking.

docs/en/section_one/index.md

@@ -1,6 +1,14 @@
-# BeeWare Docs Tools Demo Section One
+# BeeWare Docs Tools Demo section one
 
-## Include External Markdown from a Local File
+## Non-homepage sidebar logo
+
+The logo icon in the left sidebar should be small on all pages other than the
+homepage. The site title and version number should be rendered next to it with
+the site title in slightly larger font, and the version number in smaller font.
+
+This verifies that the theme is being properly applied.
+
+## Include external markdown from a local file
 
 The following section should have only a header, and a paragraph with inline code
 followed by a code block. There should be no text between the code block and the
@@ -9,7 +17,7 @@ local files.
 
 -8<- "include_content.md:local-content"
 
-## Include External Markdown from a URL
+## Include external markdown from a URL
 
 The following section should have only a header, some text and a Markdown list.
 This verifies that the external include extension is working, and that
@@ -19,6 +27,6 @@ This verifies that the external include extension is working, and that
 https://raw.githubusercontent.com/beeware/beeware-docs-tools/refs/heads/main/docs/include_content.md:remote-content
 -8<-
 
-## Footer Navigation
+## Footer navigation
 
 Navigate to *Section One - Page Two* for the final check.

docs/en/section_one/page_two.md

@@ -1,4 +1,4 @@
-# BeeWare Docs Tools Demo Section One: Page Two
+# BeeWare Docs Tools Demo section one: page two
 
 ### Footer and navigation links
 

docs/en/section_two/index.md

@@ -1,4 +1,4 @@
-# BeeWare Docs Tools Demo Section Two
+# BeeWare Docs Tools Demo section two
 
 ### Images subdirectory
 

docs/mkdocs.de.yml

@@ -1,5 +1,5 @@
 INHERIT: config.yml
-site_name: BeeWare Demo zu Docs Tools
+site_name: BeeWare Werkzeuge für die Dokumentation
 site_url: https://beeware-docs-tools.readthedocs.io/de/latest/
 docs_dir: de
 

docs/mkdocs.en.yml

@@ -1,5 +1,5 @@
 INHERIT: config.yml
-site_name: BeeWare Docs Tools Demo
+site_name: BeeWare Docs Tools
 site_url: https://beeware-docs-tools.readthedocs.io/en/latest/
 docs_dir: en
 

docs/mkdocs.fr.yml

@@ -1,5 +1,5 @@
 INHERIT: config.yml
-site_name: BeeWare Démo des outils Docs
+site_name: BeeWare Outils Docs
 site_url: https://beeware-docs-tools.readthedocs.io/fr/latest/
 docs_dir: fr
 

pyproject.toml

@@ -26,7 +26,6 @@ dependencies = [
     "markdown-checker==0.2.5",
     "mistletoe==1.4.0",
     "mkdocs-autorefs==1.4.2",
-    "mkdocs-include-markdown-plugin==7.1.6",
     "mkdocs-literate-nav==0.6.2",
     "mkdocs-macros-plugin==1.3.9",
     "mkdocs-material==9.6.17",

src/beeware_docs_tools/overrides/assets/stylesheets/beeware_theme.css

@@ -316,16 +316,24 @@
     color: light-dark(#30314B, #96ACEE)
 }
 
-/* Unsticky header */
+/* Unsticky header, add margin to deal with sidebar top margin changes */
 .md-header {
     position: unset;
+    margin-bottom: 40px;
 }
 
 /* Disable header shadow */
 .md-header--shadow {
     box-shadow: unset;
 }
 
+/* Remove margins above sidebars */
+@media screen and (min-width: 60em) {
+    .md-sidebar__scrollwrap {
+        margin-top: -60px;
+    }
+}
+
 /* Sidebar title and GitHub links font and color */
 .md-nav__title * {
     font-family: 'Cutive', serif;
@@ -335,37 +343,100 @@
     color: unset;
 }
 
-/* Version number wrap */
-span.version_number {
+/* Site name */
+.site-name {
+    font-size: 20px;
+    padding-bottom: 8px;
+}
+
+.small .site-name {
+    padding-bottom: 0;
+}
+
+/* Sidebar title block */
+.sidebar-title-block {
+    margin-bottom: 24px;
+}
+
+.small .sidebar-title-block{
+    height: fit-content;
+    min-height: 60px;
+    margin-bottom: 42px;
+}
+
+/* Version number */
+.version-number {
     overflow-wrap: anywhere;
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.small .version-number {
+    font-size: 12px;
+    font-weight: normal;
+    overflow-wrap: anywhere;
+    padding-top: 10px;
+    float: right;
+    width: 134px;
 }
 
 /* GitHub sidebar links */
 .github-links {
     font-weight: normal;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
 }
 
-.github-links:first-of-type {
-    margin-top: 1rem;
+.small .github-link-block {
+    margin-top: 16px;
 }
 
-.github-links:last-of-type {
-    margin-bottom: 1rem;
+.github-link-block a:last-child .github-links {
+    margin-top: 8px;
+    margin-bottom: 16px;
 }
 
 /* Shows the logo in the sidebar */
 .md-nav__title .md-nav__button {
     display: unset;
 }
 
+.mobile-site-name {
+    font-family: Cutive, "serif";
+    font-size: 16px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.mobile-version-number {
+    font-size: 12px;
+    display: inline-block;
+    vertical-align: middle;
+    padding-top: 4px;
+    padding-left: 4px;
+}
+
+.mobile-sidebar-drawer {
+    color: light-dark(#000000, #FFFFFF);
+    background-color: light-dark(#DBDBDB, #757679);
+}
+
 /* Adjusts sidebar logo */
 @media screen and (min-width: 76.2344rem) {
     .md-nav__title .md-nav__button.md-logo img {
         height: unset;
         padding-bottom: 1rem;
     }
+
+    .md-nav__title.small .sidebar-logo img {
+        height: 60px !important;
+        float: left;
+        padding-left: 4px;
+        padding-right: 8px;
+        padding-bottom: 0 !important;
+    }
+
+    .mobile-site-name, .mobile-version-number {
+        display: none;
+    }
 }
 
 /* Adjusts sidebar title block, which includes GitHub links */
@@ -377,6 +448,10 @@ span.version_number {
         color: #FFFFFFD3;
     }
 
+    .md-nav--primary .md-nav__title .md-nav__icon {
+        position: relative;
+    }
+
     .md-nav--primary .md-nav__title {
         padding-top: 16px;
     }
@@ -388,6 +463,21 @@ span.version_number {
 
     .md-nav__title .md-nav__button.md-logo img {
         padding-bottom: 10px;
+        height: 60px;
+    }
+
+    .small .sidebar-logo {
+        width: fit-content;
+        float: left;
+        padding-right: 6px;
+    }
+
+    .small .version-number {
+        width: 146px;
+    }
+
+    .md-sidebar.md-sidebar--secondary {
+        top: 66px !important;
     }
 }
 
@@ -397,6 +487,12 @@ body {
     font-size: 1rem;
 }
 
+/* Shifts the footer down to regain screen-space on pages with short content */
+.md-content {
+    min-height: 81vh;
+    margin-top: -60px;
+}
+
 /* Read the Docs elements font size fix */
 readthedocs-flyout,
 readthedocs-notification,
@@ -473,3 +569,21 @@ input.md-search__input, .md-search__suggest, .md-search-result__meta {
 footer.md-footer *, html .md-footer-meta.md-typeset a  {
     color: light-dark(#343A40, #E2E4E9);
 }
+
+/* Footer navigation */
+.md-footer__inner {
+    padding: 0;
+}
+.md-footer__link {
+    margin-bottom: 0;
+    margin-top: 0.5rem;
+}
+.md-footer__title {
+    font-size: .6rem;
+}
+.md-footer__direction {
+    font-size: .6rem
+}
+.md-footer__button {
+    margin: 0 0 0.2rem 0;
+}