From 6451684c1d7f21b8b66703bcb0c3eb6f6ac353a3 Mon Sep 17 00:00:00 2001
From: Tymon <xtymon@riseup.net>
Date: Mon, 24 Oct 2022 11:11:46 +0200
Subject: [PATCH] make footer better on mobile

---
 src/components/footer.astro |  8 +++++---
 src/css/base.scss           | 25 +++++++++++++++++--------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/footer.astro b/src/components/footer.astro
index e4ab0c7..b7c1adc 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -14,8 +14,10 @@ import '../css/color.scss'
           )
       })}
     </div>
-    <!--<img src="https://media.ruthenic.com/pentagram.png" alt="Spinning pentagram" style="animation: rotation 10s infinite linear;">-->
-    <img src="https://media.ruthenic.com/lgbtq%20badge.png" alt="LGBTQ+ rights!"> <!-- sry idk what else to put there lmao -->
-    <img src="https://media.ruthenic.com/god%20cant%20help%20you%20now%20badge.png" alt="CAUTION: God can't help you now.">
+    <div class="img-container">
+        <!--<img src="https://media.ruthenic.com/pentagram.png" alt="Spinning pentagram" style="animation: rotation 10s infinite linear;">-->
+        <img src="https://media.ruthenic.com/lgbtq%20badge.png" alt="LGBTQ+ rights!"> <!-- sry idk what else to put there lmao -->
+        <img src="https://media.ruthenic.com/god%20cant%20help%20you%20now%20badge.png" alt="CAUTION: God can't help you now.">
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/css/base.scss b/src/css/base.scss
index 6ef0ecd..6e99f0d 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -35,7 +35,7 @@
   @media (max-width: 470px) { //mobile
     justify-content: flex-end;
     align-items: center;
-    flex-direction: column;
+    flex-direction: row;
   }
   @media (min-width: 470px) { //desktop
     justify-content: center;
@@ -46,15 +46,24 @@
   bottom: 0;
   left: 0px;
   width: 100%;
-  img {
+  
+  .img-container {
     display: flex;
-    height: 30px*1.5;
-    @media (max-width: 470px) { //even smoler mobile
-      margin-top: 0.3125em;
-      margin-bottom: 0.3125em;
+    flex-direction: row;
+    @media (max-width: 470px) {
+      flex-direction: column;
     }
-    @media (min-width: 470px) { //desktop
-      margin-right: 0.625em;
+    img {
+      display: flex;
+      height: 45px;
+      @media (max-width: 470px) { //even smoler mobile
+        height: 30px;
+        margin-top: 0.3125em;
+        margin-bottom: 0.3125em;
+      }
+      @media (min-width: 470px) { //desktop
+        margin-right: 0.625em;
+      }
     }
   }
 }