Merge pull request #2 from jupyter-book/agoose77/feat-drop-spacers

🛠️ Drop spacers in favour of padding

Author: agoose77

css/footer.css

@@ -4,17 +4,26 @@
   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: 0.1fr 3fr 3fr 4fr 0.1fr;
+    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 */

footer.md

@@ -1,20 +1,17 @@
 % 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
+% 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
@@ -28,11 +25,13 @@ This is a description of our project. And a [link to its homepage](https://githu
 ::::
 
 <!-- Spacer between project description and links columns -->
+
 ::::{div}
 ::::
 
 <!-- Link columns -->
-% This a *second* grid embedded within the first one, to create nicer
+
+% 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.
@@ -43,23 +42,19 @@ This is a description of our project. And a [link to its homepage](https://githu
 - [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}
 ::::
 
 :::::