style: better footer navigation

1 files changed, 33 insertions, 32 deletions

diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 44811c6c..e19405ac 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,9 +1,40 @@
-/* site footer */
-
 #footer {
     width: var(--page-width);
     margin: 2rem auto;
     font-family: var(--mono-font-family);
+
+    #footer-links {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        ul.footer-navigation {
+            list-style: none;
+            display: flex;
+            gap: 0.5rem;
+            justify-content: flex-end;
+            padding-inline-start: 0;
+            margin: .5rem 0;
+            li {
+                display: inline-flex;
+                align-items: center;
+                img {
+                    height: 1rem;
+                    width: auto;
+                    display: inline-block;
+                    border-radius: 100%
+                }
+            }
+        }
+    }
+
+    #footer-copyright {
+        .word-count {
+            font-family: var(--serif-font-family);
+            font-size: .9rem;
+            color: var(--secondary-text-color)
+        }
+    }
 }
 
 @media screen and (min-width: 768px) {
@@ -12,33 +43,3 @@
         justify-content: space-between;
     }
 }
-
-#footer-links {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-}
-
-#footer-links ul.footer-navigation {
-    list-style: none;
-    display: flex;
-    gap: 0.2rem;
-    justify-content: flex-end;
-    padding-inline-start: 0;
-}
-
-#footer-links ul.footer-navigation li {
-    display: inline-flex;
-    align-items: center;
-}
-
-#footer-links ul.footer-navigation li img {
-    height: 1rem;
-    width: auto
-}
-
-#footer-copyright .word-count {
-    font-family: var(--serif-font-family);
-    font-size: .9rem;
-    color: var(--secondary-text-color)
-}