diff --git a/assets/theme-css/bulma.css b/assets/theme-css/bulma.css index f85c3174..fd403928 100644 --- a/assets/theme-css/bulma.css +++ b/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 { diff --git a/assets/theme-css/content.css b/assets/theme-css/content.css index 01891d99..9221a0d7 100644 --- a/assets/theme-css/content.css +++ b/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; } diff --git a/assets/theme-css/footer.css b/assets/theme-css/footer.css index 930ab562..0ec1fa4b 100644 --- a/assets/theme-css/footer.css +++ b/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 { diff --git a/assets/theme-css/navbar.css b/assets/theme-css/navbar.css index 4650f5f3..857e16a0 100644 --- a/assets/theme-css/navbar.css +++ b/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; } diff --git a/assets/theme-css/sphinx-design/_grids.scss b/assets/theme-css/sphinx-design/_grids.scss index f1d2b62c..2deae8ec 100644 --- a/assets/theme-css/sphinx-design/_grids.scss +++ b/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%; } diff --git a/assets/theme-css/tables.css b/assets/theme-css/tables.css index 568a7d83..db49eb29 100644 --- a/assets/theme-css/tables.css +++ b/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; diff --git a/assets/theme-css/vars.css b/assets/theme-css/vars.css index 64535b03..e9b4a360 100644 --- a/assets/theme-css/vars.css +++ b/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 */ } diff --git a/layouts/index.html b/layouts/index.html index b62c7aec..c41c6b9e 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -8,7 +8,7 @@ {{ end }} {{ if .Content }} -
+
{{ .Content }}
diff --git a/layouts/partials/_elements/grid.html b/layouts/partials/_elements/grid.html index 473a5c55..417ff459 100644 --- a/layouts/partials/_elements/grid.html +++ b/layouts/partials/_elements/grid.html @@ -5,7 +5,25 @@ {{- if eq $outline "true" -}} {{- $outline = "sd-border-1" -}} {{- end -}} -
+{{- $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 -}} +
{{- if eq $columns "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 -}} -
+
{{- end }} {{- range $key, $item := $items -}} {{- if eq $item.type "card" }} diff --git a/layouts/shortcodes/blog.html b/layouts/shortcodes/blog.html index 4d68f4de..cc685ae4 100644 --- a/layouts/shortcodes/blog.html +++ b/layouts/shortcodes/blog.html @@ -1,4 +1,4 @@ -
+
{{ $latest := (first 8 (where $.Site.RegularPages.ByPublishDate.Reverse "Section" "posts")) }}