From 28f9251512a730760f6c488ae074e7e5f00abed8 Mon Sep 17 00:00:00 2001
From: MisbehavedNinjaRadiator
 <120029998+MisbehavedNinjaRadiator@users.noreply.github.com.>
Date: Wed, 21 May 2025 14:03:33 +0200
Subject: [PATCH] Mobile view works, but broke desktop in the process

---
 code/frontend/src/Footer.css | 27 +++++++++++----------------
 code/frontend/src/Footer.tsx | 20 ++++++++------------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/code/frontend/src/Footer.css b/code/frontend/src/Footer.css
index edf6d2f..f862ffa 100644
--- a/code/frontend/src/Footer.css
+++ b/code/frontend/src/Footer.css
@@ -9,26 +9,28 @@
   display: flex;
   flex-direction: row;
   align-items:flex-start;
+  justify-content: space-between;
   background-color: var(--Rotkehlchen-gray);
   padding: 1rem;
   gap: 2rem;
   text-align: center;
+  text-decoration: none;
 }
 
 .footer-left {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  align-items: center;
+  gap: 2rem;
+  align-items: flex-start;
 }
 
 .footer-link {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  color: black;
+  gap: 0.5rem;            /*Gap between icon and logo */
+  text-decoration: none;  /*prevents constant underline*/
+  color: black;         
   font-weight: 500;
-  text-decoration: none;
 }
 
 .footer-link.feather img {
@@ -51,15 +53,8 @@
 .footer-right {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-  align-items: center;
-}
-
-.footer-column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  align-items: center;
+  gap: 0.4rem;            /*gap between the links*/
+  align-items: flex-end;
 }
 
 .footer-column a {
@@ -68,11 +63,11 @@
   font-weight: 500;
 }
 
-.footer-column a:hover {
+.footer-link:hover, .footer-link:active {
   text-decoration: underline;
 }
 
-/*media adjusts styles for desktop */
+/*@media adjusts styles for desktop */
 
 @media (min-width: 768px) {
   .footer {
diff --git a/code/frontend/src/Footer.tsx b/code/frontend/src/Footer.tsx
index 014aa19..2b08d19 100644
--- a/code/frontend/src/Footer.tsx
+++ b/code/frontend/src/Footer.tsx
@@ -20,18 +20,14 @@ function Footer() {
       </div>
 
       <div className="footer-right">
-        <div className="footer-column">
-          <a href="">Home</a>
-          <a href="">About</a>
-        </div>
-        <div className="footer-column">
-          <a href="">Login</a>
-          <a href="">Sign up</a>
-        </div>
-        <div className="footer-column">
-          <a href="">Create Post</a>
-          <a href="">Feed</a>
-        </div>
+    
+          <a className="footer-link" href="#">Home</a>
+          <a className="footer-link" href="#">About</a>
+          <a className="footer-link" href="#">Login</a>
+          <a className="footer-link" href="#">Sign up</a>
+          <a className="footer-link" href="#">Create Post</a>
+          <a className="footer-link" href="#">Feed</a>
+       
       </div>
     </footer>
   );