footer responsiveness improvements + reduced scaling

UoaWDCC · Aug 7, 2024 · 7f843e8 · 7f843e8
1 parent 66d3850
commit 7f843e8
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/src/styles/footer.css b/src/styles/footer.css
@@ -41,16 +41,17 @@
 .footer-left{
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .footer-logo{
     filter: drop-shadow(3px 6px 5px #a3a3a3);
 }
 
 .logoContainer {
-    padding: 10px 0;
+    padding: 8px 0;
     display: flex;
-    width: 200px;   /* Change logo size */
+    width: 125px;   /* Change logo size */
 }
 
 .FeetTitle {
@@ -62,12 +63,15 @@
 
 .youthFont {
     color: var(--YOO-Green-Primary);
-    font-size: var(--fontsize-h4);
+    font-size: var(--fontsize-h5);
     font-weight: 800;
+
+    line-height: 1.3;
 }
 
 .emailFont {
-    font-size: var(--fontsize-h5);
+    font-size: var(--fontsize-reg);
+    line-height: 1;
 }
 
 
@@ -80,27 +84,33 @@
     padding: 20px;
     display: flex;
     gap: 60px;
-    font-size: var(--fontsize-h5);
+    font-size: 1.1rem;
+
     font-weight: 700;
 }
 
+.footer-nav a{
+    transition: all 200ms;
+}
 .footer-nav a:hover {
     text-decoration: underline;
+    color: var(--text-active);
 }
 
 .socials-subtitle{
-    font-size: var(--fontsize-h5);
+    font-size: var(--fontsize-lrg);
+    color: var(--YOO-Green-Primary);
     font-weight: 700;
     padding-bottom: 8px;
 }
 
 .soclogContainer {
     display: flex;
-    gap: 20px;
+    gap: 15px;
 }
 
 img.soclog{
-    width: 32px;
+    width: 26px;
     height:auto;
     padding: 3px;
 }
@@ -123,8 +133,15 @@ img.soclog{
         padding: 10px 20px;
         display: flex;
         flex-direction: column;
-        gap: 0px;
-        font-size: var(--fontsize-h5);
-        font-weight: 700;
+        gap: 0;
+    }
+}
+
+@media(max-width: 900px){
+    .feet{
+        flex-direction: column;
+    }
+    .footer-nav{
+        display: none;
     }
 }