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() {
-
- Home - About -
-
- Login - Sign up -
-
- Create Post - Feed -
+ + Home + About + Login + Sign up + Create Post + Feed +
);