👣 Add example footer (#1)

* Add example footer

* Tweak footer

* Remove error from index

* Use footer-descriptiong and footer-column blocks

* Add footer styling

* wip: styling

* fix: remove broken style

* feat: use col-screen

* Further iterate on footer spacing and adjust content for landing pages

* Update documentation for grids to be more understandable

---------

Co-authored-by: Angus Hollands <[email protected]>
Co-authored-by: choldgraf <[email protected]>

Author: 3 people

css/footer.css

@@ -0,0 +1,35 @@
+.footer {
+  background: #013243;
+  color: white;
+  padding-left: 2rem;
+  padding-right: 2rem;
+
+  /* Outer content grid */
+  & .outer-grid {
+    /* spacer, project description, spacer, link columns, spacer */
+    grid-template-columns: 0.1fr 3fr 3fr 4fr 0.1fr;
+    align-items: center;
+    margin-bottom: 0rem;
+
+    & li {
+      list-style: none;
+    }
+
+  }
+
+  /* Heading colours */
+  & a,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: white;
+  }
+
+  & h1 {
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+}

footer.md

@@ -0,0 +1,65 @@
+% 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
+
+<!-- Left spacer -->
+::::{div}
+::::
+
+<!-- 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
+:::
+
+::::
+
+<!-- Right-most spacer -->
+::::{div}
+::::
+
+:::::

index.md

@@ -1,9 +1,9 @@
 ---
 title: Welcome to My Landing Page
 site:
-  hide_outline: true
-  hide_toc: true
   hide_title_block: true
+  hide_toc: true
+  hide_outline: true
 ---
 
 +++ { "kind": "split-image" }
@@ -102,11 +102,3 @@ A wild caption appeared!
 +++ { "kind": "no-such-block" }
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-## Error State
-
-When you do not provide an image to the `split-image` block, it will error at you and look like this:
-
-+++ { "kind": "split-image" }
-
-Uh oh, no image!

myst.yml

@@ -12,3 +12,7 @@ site:
     favicon: favicon.ico
     logo: site_logo.png
     logo_text: Landing Pages
+    style: ./css/footer.css
+
+  parts:
+    footer: footer.md