From 37a924a05224a7d164a953e5e72ea583000ba651 Mon Sep 17 00:00:00 2001
From: Jarrod Millman <jarrod.millman@gmail.com>
Date: Thu, 12 Jun 2025 12:36:39 -0700
Subject: [PATCH 1/4] Add footer

---
 footer.md | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 myst.yml  |  2 ++
 2 files changed, 62 insertions(+)
 create mode 100644 footer.md

diff --git a/footer.md b/footer.md
new file mode 100644
index 0000000..59b8a87
--- /dev/null
+++ b/footer.md
@@ -0,0 +1,60 @@
+% This defines the footer of the site, and is not parsed as a regular "page"
+% We point to it with the following in `myst.yml`:
+% site:
+% parts:
+% footer: footer.md
+
+% Here we use `grid` to add a basic grid structure to the HTML,
+% but the formatting column sizes are defined manually in css/footer.css
+% see the `grid-template-columns` line.
+:::::{grid} 3 3 5 5
+:class: outer-grid col-screen
+
+<!-- Project description -->
+
+::::{div}
+
+# Landing Pages
+
+```{image} https://jupyterbook.org/en/stable/_images/logo-square.svg
+:width: 50px
+:align: left
+```
+
+This is a description of our project. And a [link to its homepage](https://github.com/jupyter-book/example-landing-pages).
+::::
+
+<!-- Spacer between project description and links columns -->
+
+::::{div}
+::::
+
+<!-- Link columns -->
+
+% This a _second_ grid embedded within the first one, to create nicer
+% responsive design experience. This grid will have a single column on narrow screens,
+% and fan out into three columns on wide screens. However, it always remains within
+% its parent grid column.
+::::{grid} 1 1 3 3
+
+:::{div}
+
+- [About](https://mystmd.org/overview/ecosystem)
+- [Guide](https://mystmd.org/guide)
+- [Sandbox](https://mystmd.org/sandbox)
+  :::
+
+:::{div}
+
+- A second column!
+- With multiple entries
+  :::
+
+:::{div}
+
+- And what about a third
+  :::
+
+::::
+
+:::::
diff --git a/myst.yml b/myst.yml
index 600341f..82d38c3 100644
--- a/myst.yml
+++ b/myst.yml
@@ -19,3 +19,5 @@ site:
     favicon: images/favicon.ico
     logo: images/statistical-python-logo.svg
     logo_text: Statistical Python
+  parts:
+    footer: footer.md

From 9e73c35eb2d59958d445ba98ae29da4e985408ca Mon Sep 17 00:00:00 2001
From: Brian Hawthorne <brian.lee.hawthorne@proton.me>
Date: Fri, 20 Jun 2025 14:15:27 -0700
Subject: [PATCH 2/4] style footer

---
 myst.yml |  1 +
 site.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 site.css

diff --git a/myst.yml b/myst.yml
index 82d38c3..d373eec 100644
--- a/myst.yml
+++ b/myst.yml
@@ -19,5 +19,6 @@ site:
     favicon: images/favicon.ico
     logo: images/statistical-python-logo.svg
     logo_text: Statistical Python
+    style: ./site.css
   parts:
     footer: footer.md
diff --git a/site.css b/site.css
new file mode 100644
index 0000000..762f94a
--- /dev/null
+++ b/site.css
@@ -0,0 +1,58 @@
+html, body {
+  height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.article.content {
+  min-height: 50vh;
+  flex: 1 0 auto;
+}
+
+.footer {
+  flex-shrink: 0;
+  background: #013243;
+  color: white;
+  padding-left: 2rem;
+  padding-right: 2rem;
+
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+
+  /* Outer content grid */
+  & .outer-grid {
+    /* spacer, project description, spacer, link columns, spacer */
+    grid-template-columns: 3fr 3fr 4fr;
+    align-items: center;
+    margin-bottom: 0rem;
+
+    & li {
+      list-style: none;
+    }
+  }
+
+  @media (max-width: 640px) {
+    & .outer-grid {
+      grid-template-columns: 1fr;
+      justify-items: start;
+    }
+  }
+
+  /* Heading colours */
+  & a,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: white;
+  }
+
+  & h1 {
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+}

From ab5aede8ffd4da53ed1f5e611072e312abbafbe8 Mon Sep 17 00:00:00 2001
From: Brian Hawthorne <brian.lee.hawthorne@proton.me>
Date: Fri, 20 Jun 2025 14:27:18 -0700
Subject: [PATCH 3/4] improve content height

---
 site.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site.css b/site.css
index 762f94a..2a0ca3d 100644
--- a/site.css
+++ b/site.css
@@ -7,7 +7,7 @@ body {
 }
 
 .article.content {
-  min-height: 50vh;
+  min-height: 0vh;
   flex: 1 0 auto;
 }
 

From 3f70e19360018e3bcff0aa1c95a5c710e017e565 Mon Sep 17 00:00:00 2001
From: Brian Hawthorne <brian.lee.hawthorne@proton.me>
Date: Fri, 20 Jun 2025 19:25:28 -0700
Subject: [PATCH 4/4] document sticky footer solution, per stefanv's out of
 band PR review

---
 site.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/site.css b/site.css
index 2a0ca3d..ec88f26 100644
--- a/site.css
+++ b/site.css
@@ -7,11 +7,22 @@ body {
 }
 
 .article.content {
+  /* Override 100vh from myst-theme:styles/typography.css so content div
+   * doesn't push the footer offscreen.
+   */
   min-height: 0vh;
   flex: 1 0 auto;
 }
 
 .footer {
+  /* Make footer "sticky" to page bottom (also the above flex rules), per
+   * the flexbox strategy described here:
+   * 	https://css-tricks.com/couple-takes-sticky-footer/#aa-there-is-flexbox
+   * and here:
+   *    https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+   * This solution does not require hardcoding a fixed footer height in the
+   * style rules.
+   */
   flex-shrink: 0;
   background: #013243;
   color: white;