Fix navbar and footer alignments with the main content (#699)

Author: agriyakhetarpal

assets/theme-css/bulma.css

@@ -4,17 +4,9 @@
   flex-grow: 1;
   margin: 0 auto;
   position: relative;
-  width: auto;
-}
-@media screen and (min-width: 1024px) {
-  .container {
-    max-width: 960px;
-  }
-}
-@media screen and (min-width: 1216px) {
-  .container {
-    max-width: 1152px;
-  }
+  width: 100%;
+  max-width: var(--spht-page-width);
+  padding: 0 var(--spht-page-padding);
 }
 @media screen and (max-width: 768px) {
   .is-hidden-mobile {

assets/theme-css/content.css

@@ -1,17 +1,25 @@
 .content-padding {
   display: flex;
   flex-wrap: nowrap;
+  width: 100%;
+  max-width: var(--spht-page-width);
+  margin: 1em auto;
+  padding: 0 var(--spht-page-padding);
+  gap: 1.875rem;
+}
+
+/* The home page centres its content, as there is no logo for us to align with. */
+.content-padding.is-centered {
   justify-content: center;
-  margin: 1em;
 }
 
 .content-container {
+  /* Left-anchored, so content doesn't shift on pages without the sidebar. */
   flex-basis: 70em;
   flex-shrink: 1;
   flex-direction: column;
-  margin: 0 1.875rem;
-  padding: 1rem;
+  padding: 1rem 0;
 
-  /* Handle code cells overflowing */
-  overflow: auto;
+  /* Allow the column to shrink. */
+  min-width: 0;
 }

assets/theme-css/footer.css

@@ -1,6 +1,7 @@
 /* Footer */
 #footer {
-  padding: 3rem 1.5rem 6rem;
+  /* Horizontal padding comes from .container. */
+  padding: 3rem 0 6rem;
 }
 
 #footer {
@@ -11,7 +12,7 @@
 }
 
 #footer-logo-column {
-  padding: 1.25rem 5vw;
+  padding: 1.25rem 0;
   font-size: 1rem;
 }
 
@@ -21,6 +22,8 @@
 
 #footer-columns {
   display: flex;
+  flex-wrap: wrap;
+  column-gap: 3rem;
 }
 
 .footer-column {
@@ -52,8 +55,8 @@
 }
 
 .footer-actions {
-  max-width: 25vw;
-  margin: 1.25rem 1.563rem;
+  max-width: 24rem;
+  margin: 1.25rem 0 1.25rem auto;
 }
 
 .footer-actions > p {
@@ -73,7 +76,9 @@
   }
 
   .footer-actions {
-    max-width: 50vw;
+    /* Undo the right-aligning auto margin. */
+    margin: 1.25rem 0;
+    max-width: 100%;
   }
 
   .community-icons {

assets/theme-css/navbar.css

@@ -10,6 +10,9 @@
   align-items: stretch;
   display: flex;
   min-height: 4rem;
+
+  /* Cancel the first item's padding so the logo sits on the page edge. */
+  margin-left: -0.75rem;
 }
 .navbar-logo {
   height: 28px;
@@ -168,9 +171,6 @@ a.navbar-item.nav-external::after,
     align-items: stretch;
     display: flex;
   }
-  .navbar > .container .navbar-brand {
-    margin-left: -0.75rem;
-  }
   .navbar > .container .navbar-menu {
     margin-right: -0.75rem;
   }

assets/theme-css/sphinx-design/_grids.scss

@@ -15,8 +15,10 @@ $gutter-widths: $spacings;
 .sd-container-xl {
   margin-left: auto;
   margin-right: auto;
-  padding-left: var(--sd-gutter-x, 0.75rem);
-  padding-right: var(--sd-gutter-x, 0.75rem);
+  // Half the gutter, as in Bootstrap. The original 0.75rem
+  // overflows with larger gutters.
+  padding-left: calc(var(--sd-gutter-x, 1.5rem) * 0.5);
+  padding-right: calc(var(--sd-gutter-x, 1.5rem) * 0.5);
   width: 100%;
 }
 

assets/theme-css/tables.css

@@ -1,3 +1,11 @@
+/* Make wide tables scroll on their own, since the content column does not. */
+table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 table th {
   color: var(--pst-color-text-muted);
   text-align: inherit;

assets/theme-css/vars.css

@@ -5,6 +5,15 @@
   --spht-color-link-hover: rgb(77, 171, 207);
   --spht-footer-height: 6em;
 
+  /* Page width and edge padding shared by the navbar, content, and footer.
+     The values are taken from the PST, see:
+     - https://github.com/pydata/pydata-sphinx-theme/blob/3cffc437857105e0852b1caf0dc09e7f36ff07f6/src/pydata_sphinx_theme/assets/styles/variables/_layout.scss#L23
+     - https://github.com/pydata/pydata-sphinx-theme/blob/3cffc437857105e0852b1caf0dc09e7f36ff07f6/src/pydata_sphinx_theme/assets/styles/sections/_container.scss#L11-L17
+     - https://github.com/pydata/pydata-sphinx-theme/blob/3cffc437857105e0852b1caf0dc09e7f36ff07f6/src/pydata_sphinx_theme/assets/styles/sections/_header.scss#L37-L42
+     - https://github.com/pydata/pydata-sphinx-theme/blob/3cffc437857105e0852b1caf0dc09e7f36ff07f6/src/pydata_sphinx_theme/assets/styles/sections/_footer.scss#L5-L10 */
+  --spht-page-width: 88rem;
+  --spht-page-padding: 1rem;
+
   /* Font Awesome icon variables. */
   --fa-copy: "\f0c5";  /* fa-solid fa-copy */
 }

layouts/index.html

@@ -8,7 +8,7 @@
     {{ end }}
 
     {{ if .Content }}
-    <section class="content-padding">
+    <section class="content-padding is-centered">
       <div class="content-container">
         {{ .Content }}
       </div>

layouts/partials/_elements/grid.html

@@ -5,7 +5,25 @@
 {{- if eq $outline "true" -}}
   {{- $outline = "sd-border-1" -}}
 {{- end -}}
-<div class="sd-container-fluid sd-mb-4 {{ $outline | safeHTMLAttr }}">
+{{- $gutterParts := split $gutter " " -}}
+{{- $gXs := index $gutterParts 0 -}}
+{{- $gSm := $gXs -}}
+{{- $gMd := $gXs -}}
+{{- $gLg := $gXs -}}
+{{- if and (gt (len $gutterParts) 1) (ne (len $gutterParts) 4) -}}
+  {{- errorf "grid gutter must be either 1 or 4 values (but got %d): %q" (len $gutterParts) $gutter -}}
+{{- else if eq (len $gutterParts) 4 -}}
+  {{- $gSm = index $gutterParts 1 -}}
+  {{- $gMd = index $gutterParts 2 -}}
+  {{- $gLg = index $gutterParts 3 -}}
+{{- end -}}
+{{- /* Both need the classes: the container for its padding, and the row
+  because its base rule overrides the inherited variable. */ -}}
+{{- $gutterClasses := printf "sd-g-%s sd-g-xs-%s sd-g-sm-%s sd-g-md-%s sd-g-lg-%s" $gXs $gXs $gSm $gMd $gLg -}}
+{{- if eq $columns "auto" -}}
+  {{- $gutterClasses = "" -}}
+{{- end -}}
+<div class="sd-container-fluid sd-mb-4 {{ $outline | safeHTMLAttr }} {{ $gutterClasses }}">
 {{- if eq $columns "auto"}}
   <div class="sd-row sd-row-cols-auto sd-row-cols-xs-auto sd-row-cols-sm-auto sd-row-cols-md-auto sd-row-cols-lg-auto">
 {{- else }}
@@ -14,19 +32,7 @@
   {{- $sm := index $columns 1 }}
   {{- $md := index $columns 2 }}
   {{- $lg := index $columns 3 }}
-  {{- $gutterParts := split $gutter " " -}}
-  {{- $gXs := index $gutterParts 0 -}}
-  {{- $gSm := $gXs -}}
-  {{- $gMd := $gXs -}}
-  {{- $gLg := $gXs -}}
-  {{- if and (gt (len $gutterParts) 1) (ne (len $gutterParts) 4) -}}
-    {{- errorf "grid gutter must be either 1 or 4 values (but got %d): %q" (len $gutterParts) $gutter -}}
-  {{- else if eq (len $gutterParts) 4 -}}
-    {{- $gSm = index $gutterParts 1 -}}
-    {{- $gMd = index $gutterParts 2 -}}
-    {{- $gLg = index $gutterParts 3 -}}
-  {{- end -}}
-  <div class="sd-row sd-row-cols-{{ $xs }} sd-row-cols-xs-{{ $xs }} sd-row-cols-sm-{{ $sm }} sd-row-cols-md-{{ $md }} sd-row-cols-lg-{{ $lg }} sd-g-{{ $gXs }} sd-g-xs-{{ $gXs }} sd-g-sm-{{ $gSm }} sd-g-md-{{ $gMd }} sd-g-lg-{{ $gLg }}">
+  <div class="sd-row sd-row-cols-{{ $xs }} sd-row-cols-xs-{{ $xs }} sd-row-cols-sm-{{ $sm }} sd-row-cols-md-{{ $md }} sd-row-cols-lg-{{ $lg }} {{ $gutterClasses }}">
 {{- end }}
 {{- range $key, $item := $items -}}
   {{- if eq $item.type "card" }}

layouts/shortcodes/blog.html

@@ -1,4 +1,4 @@
-<section class="content-padding flex-row">
+<section class="content-padding is-centered flex-row">
   <div class="content-container">
     {{ $latest := (first 8 (where $.Site.RegularPages.ByPublishDate.Reverse "Section" "posts")) }}