Add footer (#9)

* Add footer

* style footer

* improve content height

* document sticky footer solution, per stefanv's out of band PR review

---------

Co-authored-by: Brian Hawthorne <brian.lee.hawthorne@proton.me>

Author: jarrodmillman

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
+  :::
+
+::::
+
+:::::

myst.yml

@@ -19,3 +19,6 @@ site:
     favicon: images/favicon.ico
     logo: images/statistical-python-logo.svg
     logo_text: Statistical Python
+    style: ./site.css
+  parts:
+    footer: footer.md

site.css

@@ -0,0 +1,70 @@
+html,
+body {
+  height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.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;
+  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;
+  }
+}