Theme update - Update all the layout sections/components and css features

docs/about.rst

@@ -75,21 +75,26 @@ Footer Bar
 ----------
 
 In addition to the top navigation bar at the top of each page, the full-width footer
-bar from the PyData Sphinx Theme has been readded to the bottom of every page.  By default, the
-footer bar only contains copyright and additional information about the Sphinx version (if configured).
+bar from the PyData Sphinx Theme has been re-added to the bottom of every page.
+
+.. note::
+   While PyData Sphinx Theme has ``footer_start``, ``footer_center``, and ``footer_end`` to set,
+our theme supports only ``footer_start``, and allows to add below structures into it.
+
+By default, the footer bar only contains copyright and additional information about the Sphinx version (if configured).
 Three additional sections can be added to the footer: a *logo bar*, a *bottom navigation menu*, and
 an *extras* section.
 
 Footer Logo Bar
 ^^^^^^^^^^^^^^^
 
 The *logo bar* section can be used to add logo images for various partner or collaboration
-institutions, products, or other entities involved with site itself.  These are spread out
+institutions, products, or other entities involved with site itself. These are spread out
 evenly across the footer in a light-gray full-width box.
 
 To add logo images to the *logo bar* in the footer, use the ``footer_logos`` option of the
-``html_theme_options``.  The name given to each logo is used as the alternate name of
-the image in HTML.
+``html_theme_options`` and then add it to ``footer_start``.  The name given to each logo is
+used as the alternate name of the image in HTML.
 
 .. tab-set-code:: Sphinx
 
@@ -99,7 +104,8 @@ the image in HTML.
           'footer_logos': {
               'name1': 'images/logo1.svg',
               'name2': 'images/logo2.svg',
-          }
+          },
+          "footer_start": ["footer-logos"]
       }
 
 .. tab-set-code:: Jupyter Book
@@ -162,6 +168,7 @@ the keys in the ``navbar_links`` option above).
                   ],
               },
           ],
+          "footer_start": ["footer-menu"]
       }
 
 .. tab-set-code:: Jupyter Book
@@ -195,7 +202,7 @@ Extra Footer
 The *extra* section of the footer is displayed immediately below the *info* section, and
 it can be set with the
 `extra footer <https://sphinx-book-theme.readthedocs.io/en/latest/customize/index.html?highlight=extra_footer#theme-options>`_
-(``extra_footer``) Sphinx Book Theme option.
+(``extra_footer``) Sphinx Book Theme option and then added to the ``footer_start``.
 
 Special Page layouts
 --------------------

docs/conf.py

@@ -60,7 +60,7 @@
 }
 
 jupyter_cache = ""
-jupyter_execute_notebooks = "cache"
+nb_execution_mode = "cache"
 execution_allow_errors = False
 execution_excludepatterns = []
 execution_in_temp = False
@@ -146,7 +146,9 @@
     "use_repository_button": True,
     "use_download_button": True,
     "logo_only": True,
-    "logo_link": "https://sphinx-pythia-theme.readthedocs.io",
+    "logo": {
+        "link": "https://sphinx-pythia-theme.readthedocs.io",
+    },
     "show_toc_level": 2,
     "navbar_align": "left",
     "navbar_links": [
@@ -172,6 +174,7 @@
         },
         "UAlbany": "images/UAlbany-A2-logo-purple-gold.svg",
     },
+    "footer_start": ["footer-logos", "footer-menu", "footer-info", "footer-extra"],
     "extra_navbar": ('Theme by <a href="https://projectpythia.org">Project Pythia</a>'),
 }
 

sphinx_pythia_theme/footer.html

@@ -1,9 +1,14 @@
-<footer class="footer">
-  <div class="container-fluid m-0 p-0">
-  {% for footer_item in theme_footer_items %}
-    <div class="footer-item">
-    {% include footer_item %}
+{% if theme_footer_start or theme_footer_center or theme_footer_end %}
+  {# Implement only footer_start to house all the #}
+  {# footer items in it, e.g. logos, menu, etc. Use of  #}
+  {# footer_center and footer_end may probably break how the rest looks  #}
+  {% if theme_footer_start %}
+    <div class="footer-items__start">
+      <div class="container-fluid m-0 p-0">
+      {% for item in theme_footer_start %}
+        <div class="footer-item">{% include item %}</div>
+      {% endfor %}
+      </div>
     </div>
-  {% endfor %}
-  </div>
-</footer>
+  {% endif %}
+{% endif %}

sphinx_pythia_theme/layout.html

@@ -1 +1,69 @@
-{%- extends "sphinx_book_theme/layout.html" %}
+{%- extends "sphinx_book_theme/layout.html" %}
+
+{%- block body_tag %}
+  {# set up with scrollspy to update the toc as we scroll #}
+  {{ super.super() }}
+{%- endblock %}
+
+{%- block content %}
+  {%- block docs_navbar %}
+    <header class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top bd-header shadow" id="navbar-main">
+      {%- include "sections/header.html" %}
+    </header>
+    {%- endblock %}
+
+  {%- if theme_page_layouts and pagename in theme_page_layouts %}
+    <div class="container-fluid">
+    {%- else %}
+    <div class="container-xl">
+    {%- endif %}
+      <div class="row">
+        {%- block docs_toc %}
+        {%- if sidebars %}
+        {{ super() }}
+        {%- else %}
+        <div class="d-none col-12 col-md-1 col-xl-2 bd-sidebar no-sidebar"></div>
+        {%- endif %}
+        {%- endblock %}
+
+        {# Main content area #}
+        {%- block docs_main %}
+        {%- if theme_page_layouts and pagename in theme_page_layouts %}
+        {%- include theme_page_layouts[pagename] %}
+        {%- else %}
+        <main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
+          {%- block docs_body %}
+          <div id="main-content" class="row">
+            <div class="col-12 col-md-9 pl-md-3 pr-md-0">
+              {{ super.super() }}
+            </div>
+          </div>
+          {%- endblock %}
+        {{ super.super() }}
+        </main>
+        {%- endif %}
+        {%- endblock %}
+
+      </div>
+    </div>
+    </div>
+
+  {%- block scripts_end %}
+  {{ _webpack.body_post() }}
+  {%- endblock %}
+
+{%- endblock %}
+
+{# Use our own footer to use only footer_start and display multiple #}
+{# structures in it, e.g. logos, menu, etc.  #}
+{%- block footer %}
+  <footer class="bd-footer">
+     {% include "footer.html" %}
+  </footer>
+{%- endblock %}
+
+{# Silence the sidebars and relbars since we define our own #}
+{% block header %}{% endblock %}
+{% block relbar1 %}{% endblock %}
+{% block relbar2 %}{% endblock %}
+{% block sidebarsourcelink %}{% endblock %}

sphinx_pythia_theme/page-standalone.html

@@ -3,8 +3,7 @@
     <div class="col p-0">
       {{ apply_denested_layout(body) }}
       {% if theme_show_prev_next %}
-      {% include "_templates/prev-next.html" %}
-      {% endif %}
-    </div>
+      {% include "components/prev-next.html" %}
+      {% endif %}    </div>
   </div>
 </main>

sphinx_pythia_theme/theme.conf

@@ -12,5 +12,5 @@ navbar_center = navbar-menu.html
 navbar_links =
 footer_logos =
 footer_menu =
-footer_items = footer-logos.html, footer-menu.html, footer-info.html, footer-extra.html
+footer-items__start = footer-logos.html, footer-menu.html, footer-info.html, footer-extra.html
 page_sidebar_items = page-toc.html

src/scss/sphinx-pythia-theme.scss

@@ -1,43 +1,44 @@
 @import 'sphinx-book-theme.css';
 
-:root {
-  --spt-font-body: 'Poppins';
-  --spt-font-headings: 'Poppins';
-  --spt-font-footnote: 'Cormorant';
-
-  --spt-color-gray-100: 248, 249, 250;
-  --spt-color-gray-200: 233, 236, 239;
-  --spt-color-gray-300: 222, 226, 230;
-  --spt-color-gray-400: 206, 212, 218;
-  --spt-color-gray-500: 173, 181, 189;
-  --spt-color-gray-600: 108, 117, 125;
-  --spt-color-gray-700: 73, 80, 87;
-  --spt-color-gray-800: 52, 58, 64;
-  --spt-color-gray-900: 33, 37, 41;
-  --spt-color-light: var(--spt-color-gray-100);
-  --spt-color-dark: var(--spt-color-gray-800);
-  --spt-color-green: 0, 121, 124;
-  --spt-color-green-lighter: 20, 141, 144;
-  --spt-color-green-lightest: 130, 231, 234;
-  --spt-color-blue: 26, 101, 143;
-  --spt-color-blue-lighter: 46, 121, 163;
-  --spt-color-blue-lightest: 156, 191, 213;
-  --spt-color-deep-blue: 1, 33, 105;
-  --spt-color-green-highlight: 168, 199, 0;
-
-  --pst-color-primary: var(--spt-color-blue);
-  --pst-color-primary-hover: var(--spt-color-blue-lighter);
-  --pst-color-link: var(--pst-color-primary);
-  --pst-color-link-hover: var(--pst-color-primary);
-  --pst-color-headerlink: var(--spt-color-gray-500);
-  --pst-color-headerlink-hover: var(--spt-color-gray-500);
-
-  --tabs-size-label: 0.8rem !important;
-  --tabs-color-label-active: rgba(var(--pst-color-primary), 1) !important;
-  --tabs-color-label-inactive: rgba(var(--spt-color-blue-lightest), 1) !important;
+:root{
+    --spt-font-body: 'Poppins';
+    --spt-font-headings: 'Poppins';
+    --spt-font-footnote: 'Cormorant';
+
+    --spt-color-gray-100: 248, 249, 250;
+    --spt-color-gray-200: 233, 236, 239;
+    --spt-color-gray-300: 222, 226, 230;
+    --spt-color-gray-400: 206, 212, 218;
+    --spt-color-gray-500: 173, 181, 189;
+    --spt-color-gray-600: 108, 117, 125;
+    --spt-color-gray-700: 73, 80, 87;
+    --spt-color-gray-800: 52, 58, 64;
+    --spt-color-gray-900: 33, 37, 41;
+    --spt-color-light: var(--spt-color-gray-100);
+    --spt-color-dark: var(--spt-color-gray-800);
+    --spt-color-green: 0, 121, 124;
+    --spt-color-green-lighter: 20, 141, 144;
+    --spt-color-green-lightest: 130, 231, 234;
+    --spt-color-blue: 26, 101, 143;
+    --spt-color-blue-lighter: 46, 121, 163;
+    --spt-color-blue-lightest: 156, 191, 213;
+    --spt-color-deep-blue: 1, 33, 105;
+    --spt-color-green-highlight: 168, 199, 0;
+
+    --pst-color-primary: var(--spt-color-blue) !important;
+    --pst-color-primary-hover: var(--spt-color-blue-lighter) !important;
+    --pst-color-secondary: var(--spt-color-blue-lightest) !important;
+    --pst-color-link: var(--pst-color-primary) !important;
+    --pst-color-link-hover: var(--pst-color-secondary) !important;
+    --pst-color-headerlink: var(--spt-color-gray-300) !important;
+    --pst-color-headerlink-hover: var(--spt-color-gray-100) !important;
+
+    --tabs-size-label: 0.8rem !important;
+    --tabs-color-label-active: rgba(var(--pst-color-primary), 1) !important;
+    --tabs-color-label-inactive: rgba(var(--spt-color-blue-lightest), 1) !important
 }
 
-$document-width: calc(0.5 * (var(--breakpoint-md) + var(--breakpoint-lg)));
+$document-width: calc(0.5 * (var(--bs-breakpoint-md) + var(--bs-breakpoint-lg)));
 
 @import "general";
 @import "bootstrap4";
@@ -193,7 +194,7 @@ main.banner-main {
 
 // FOOTER --------------------------------------------------------------------
 
-.footer {
+.bd-footer {
   color: rgba(var(--spt-color-light), 1);
   font-size: 0.8rem;
   font-family: var(--spt-font-footnote);