Merge pull request #3 from brianhawthorne/main

⚓ Make footer sticky

Author: agoose77

css/footer.css

@@ -1,4 +1,32 @@
+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-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 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;

myst.yml

@@ -3,8 +3,11 @@ version: 1
 project:
   id: ee007168-b9a5-4dba-8823-1639a4aeb956
   title: Hello Landing Pages
+  abbreviations:
+    CSS: Cascading Style Sheet
   toc:
     - file: index.md
+    - file: other-page.md
 site:
   template: book-theme
   title: Hello Landing Pages

other-page.md

@@ -0,0 +1,3 @@
+# Other Page
+
+This page contains some content. It demonstrates the use of custom CSS to implement a sticky footer.