Update layout and theme.scss to fix issues on foundations pages

ProjectPythia · Mar 14, 2024 · 29af999 · 29af999
1 parent 5eb07cd
commit 29af999
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 38 deletions.
diff --git a/sphinx_pythia_theme/layout.html b/sphinx_pythia_theme/layout.html
@@ -1,58 +1,96 @@
 {%- 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 %}
+
+  {# A tiny helper pixel to detect if we've scrolled #}
+  <div class="pst-scroll-pixel-helper"></div>
+
   {%- block docs_navbar %}
     <header class="bd-header navbar navbar-dark navbar-expand-lg bg-dark fixed-top bd-navbar shadow" id="navbar-main">
       {%- include "sections/header.html" %}
     </header>
-    {%- endblock %}
+  {%- endblock docs_navbar %}
 
   {%- 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 %}
+  <div class="container-fluid">
+    <div class="row">
+  {%- else %}
+  <div class="bd-container">
+    <div class="bd-container__inner bd-page-width">
+  {%- endif %}
+      {%- 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() }}
+      {%- else %}
+        {# Primary sidebar #}
+        {# If we have no sidebar TOC, pop the TOC component from the sidebars list #}
+        {% if suppress_sidebar_toctree(includehidden=theme_sidebar_includehidden | tobool) %}
+          {% set sidebars = sidebars | reject("in", "sidebar-nav-bs.html") | list %}
+        {% endif %}
+        <div class="bd-sidebar-primary bd-sidebar{% if not sidebars %} hide-on-wide{% endif %}">
+          {% include "sections/sidebar-primary.html" %}
+        </div>
+
+        {# Using an ID here so that the skip-link works #}
+        <main id="main-content" class="bd-main" role="main">
+          {# Main content area #}
+          {%- block docs_main %}
+
+            <div class="bd-content">
+
+              <div class="bd-article-container">
+
+                {# Article content #}
+                {%- block docs_body %}
+                  {# This is empty and only shows up if text has been highlighted by the URL #}
+                  {% include "components/searchbox.html" %}
+                  <article class="bd-article">
+                    {% block body %}{% endblock %}
+                  </article>
+                {%- endblock docs_body %}
+
+                {# Article Footer #}
+                {% if theme_article_footer_items %}
+                  <footer class="bd-footer-article">
+                    {% include "sections/footer-article.html" %}
+                  </footer>
+                {% endif %}
+
+                {# prev-next buttons #}
+                {% if theme_show_prev_next %}
+                  <footer class="prev-next-footer">
+                    {% include "components/prev-next.html" %}
+                  </footer>
+                {% endif %}
+              </div>
+
+              {# Secondary sidebar #}
+              {% block docs_toc %}
+                {% if not remove_sidebar_secondary %}
+                  <div class="bd-sidebar-secondary bd-toc">{% include "sections/sidebar-secondary.html" %}</div>
+                {% endif %}
+              {% endblock docs_toc %}
+
+
+                {# Article header #}
+                <div class="bd-header-article">{% include "sections/header-article.html" %}</div>
             </div>
-          </div>
-          {%- endblock %}
-        {{ super.super() }}
-        </main>
-        {%- endif %}
-        {%- endblock %}
 
-      </div>
-    </div>
+            <footer class="bd-footer-content">
+              {% include "sections/footer-content.html" %}
+            </footer>
+
+          {%- endblock docs_main %}
+
+        </main>
+      {%- endif %}
     </div>
+  </div>
 
   {%- block scripts_end %}
-  {{ _webpack.body_post() }}
+    {{ _webpack.body_post() }}
   {%- endblock %}
 
-{%- endblock %}
+{%- endblock content %}
 
 {# Use our own footer to use only footer_start and display multiple #}
 {# structures in it, e.g. logos, menu, etc.  #}

diff --git a/src/scss/sphinx-pythia-theme.scss b/src/scss/sphinx-pythia-theme.scss
@@ -197,6 +197,15 @@ main.banner-main {
   }
 }
 
+// CONTENT LAYOUT -------------------------------------------------------------
+
+.bd-main .bd-content .bd-article-container {
+  max-width: 100%;  /* default is 60em */
+}
+.bd-page-width {
+  max-width: 85%;  /* default is 88rem */
+}
+
 // FOOTER --------------------------------------------------------------------
 
 .bd-footer {