Add footer

Author: jarrodmillman

css/footer.css

@@ -0,0 +1,44 @@
+.footer {
+  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;
+  }
+}

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: ./css/footer.css
+  parts:
+    footer: footer.md