Re-mark up the footer

layouts/partials/footer.html

@@ -1,4 +1,10 @@
-<footer class="footer">
-  <p class="slogans"><span>Trans rights are human rights.</span> <span>Black lives matter.</span> <span>Get vaccinated.</span></p>
-  <p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
+<footer class="site">
+  <div>
+    <ul class="slogans">
+      <li>Trans rights are human rights.</li>
+      <li>Black lives matter.</li>
+      <li>Get vaccinated.</li>
+    </ul>
+    <p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
+  </div>
 </footer>

static/styles/main.css

@@ -293,33 +293,6 @@ pre {
     }
 }
 
-/*
- * Footer
- */
-
-.footer {
-    align-items: center;
-    border-top: 1px solid var(--separator-color);
-    display: flex;
-    flex-direction: column;
-    font-size: 1.8rem;
-    text-align: center;
-}
-
-.footer p {
-    margin: 0;
-}
-
-.footer p + p {
-    margin-top: 0.25rem;
-}
-
-@media (max-width: 740px) {
-    .slogans span {
-        white-space: nowrap;
-    }
-}
-
 /*
  * Main
  */

static/styles/root.css

@@ -148,3 +148,44 @@ nav.bulleted li::before {
 
 p { margin-block-end: 1em; }
 p:last-child { margin-block-end: 0; }
+
+footer.site {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.6rem;
+    margin-block-start: 2rem;
+    text-align: center;
+}
+
+footer.site > div {
+    border-top: 1px solid var(--footer-border-color);
+    padding-block-start: 2rem;
+    max-width: var(--content-width);
+}
+
+footer.site ul {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style: none;
+}
+
+footer.site .slogans li {
+    margin-inline-start: 0.5em;
+}
+
+footer.site p {
+    margin: 0;
+}
+
+footer.site p + p {
+    margin-top: 0.25rem;
+}
+
+@media (max-width: 740px) {
+    footer.site .slogans span {
+        white-space: nowrap;
+    }
+}