From e1d6c78cdfd2aabcf12be01966c4e63ee8dccc86 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 11 Sep 2022 10:35:27 -0700
Subject: [PATCH] Re-mark up the footer

---
 layouts/partials/footer.html | 12 ++++++++---
 static/styles/main.css       | 27 ------------------------
 static/styles/root.css       | 41 ++++++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index fff4077..ccff6df 100644
--- a/layouts/partials/footer.html
+++ b/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>
diff --git a/static/styles/main.css b/static/styles/main.css
index 5602885..40e5e6b 100644
--- a/static/styles/main.css
+++ b/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
  */
diff --git a/static/styles/root.css b/static/styles/root.css
index bfc868c..fc7645c 100644
--- a/static/styles/root.css
+++ b/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;
+    }
+}