diff --git a/code/frontend/src/Footer.css b/code/frontend/src/Footer.css index c0f930e..edf6d2f 100644 --- a/code/frontend/src/Footer.css +++ b/code/frontend/src/Footer.css @@ -4,28 +4,29 @@ --Rotkehlchen-orange-default: #e79a0e; } - - +/*mobile style first*/ .footer { display: flex; - justify-content: space-between; - align-items: center; + flex-direction: row; + align-items:flex-start; background-color: var(--Rotkehlchen-gray); - padding: 1rem 2rem; + padding: 1rem; + gap: 2rem; + text-align: center; } .footer-left { display: flex; flex-direction: column; gap: 1rem; - + align-items: center; } .footer-link { display: flex; align-items: center; gap: 0.5rem; - color: #000; + color: black; font-weight: 500; text-decoration: none; } @@ -36,33 +37,29 @@ transform: scale(1.5); } - .footer-link img { - - height: 22px; - object-fit:unset; + height: 1.5rem; + object-fit: unset; vertical-align: middle; } - - - - .footer-link.feather span { color: var(--Rotkehlchen-orange-default); font-weight: bold; - } .footer-right { display: flex; - gap: 4rem; + flex-direction: column; + gap: 2rem; + align-items: center; } .footer-column { display: flex; flex-direction: column; gap: 0.5rem; + align-items: center; } .footer-column a { @@ -74,3 +71,29 @@ .footer-column a:hover { text-decoration: underline; } + +/*media adjusts styles for desktop */ + +@media (min-width: 768px) { + .footer { + flex-direction: row; + justify-content: space-between; + align-items: center; + text-align: left; + padding: 2rem 4rem; + } + + .footer-left { + align-items: flex-start; + } + + .footer-right { + flex-direction: row; + gap: 4rem; + align-items: flex-start; + } + + .footer-column { + align-items: flex-start; + } +} diff --git a/code/frontend/src/Footer.tsx b/code/frontend/src/Footer.tsx index 7b714a5..014aa19 100644 --- a/code/frontend/src/Footer.tsx +++ b/code/frontend/src/Footer.tsx @@ -2,6 +2,9 @@ import React from "react"; import "./Footer.css"; function Footer() { + + + return (