fix footer spacing css so that footer is more responsive (#973)

* fix footer spacing css so that it's more responsive

* whoops there shouldn't be a package lock in here

themes/openaq/assets/scss/_footer.scss

@@ -1,30 +1,30 @@
-@use 'openaq-design-system/variables';
+@use "openaq-design-system/variables";
 
 .footer {
-  height: 250px;
-  width: 100%;
   background-color: variables.$lavender180;
   align-items: center;
   color: white;
 
   &__content {
-    height: 196px;
     display: flex;
-    flex-direction: row;
-    align-items: center;
     justify-content: space-between;
-    padding: 0 150px;
-    gap: 20px;
+    gap: 32px;
+    padding: 24px 80px;
 
     .nav-section {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 24px;
+
       .footer-logo {
         width: 90px;
         height: auto;
       }
+
       .footer-nav {
         display: flex;
         flex-direction: row;
-        margin-top: 36px;
         gap: 24px;
       }
     }
@@ -33,24 +33,33 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
+      margin: 0;
+
+      .social-links {
+        flex-wrap: wrap;
+      }
 
       .subscribe-form {
         display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
         gap: 10px;
+
+        input {
+          width: 180px;
+        }
       }
     }
   }
 
   .sub-footer {
-    width: 100%;
-    height: 54px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
 
     border-top: 1px solid variables.$sky120;
-    padding: 0 150px;
+    padding: 24px 80px;
 
     &-nav {
       display: flex;
@@ -63,30 +72,45 @@
         padding: 0 80px;
         justify-content: center;
         align-items: center;
+
         .copyright {
           order: 1;
         }
       }
     }
   }
 
-  @media (max-width: 1000px) {
+  @media (max-width: 1180px) {
     & {
       &__content {
-        padding: 0 15px;
+        .nav-section {
+          justify-content: space-between;
+        }
+
+        .contact-section {
+          justify-content: space-between;
+
+          .subscribe-form {
+            display: flex;
+            flex-direction: column;
+            align-items: left;
+
+            input {
+              width: 100%;
+            }
+          }
+        }
       }
     }
   }
 
   @media (max-width: 800px) {
     & {
       box-sizing: border-box;
-      height: 660px;
 
       &__content {
-        padding: 40px 0 0 0;
+        padding: 40px 24px 0 24px;
 
-        height: 580px;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
@@ -105,15 +129,27 @@
         }
 
         .contact-section {
-          align-items: center;
           display: flex;
+          justify-content: center;
+          align-items: center;
           flex-direction: column;
-          order: -1;
-        }
-      }
+          order: 1;
 
-      .sub-footer {
-        height: 80px;
+          .subscribe-form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            input {
+              width: 300px;
+            }
+          }
+
+          .social-links {
+            margin-bottom: 24px;
+            justify-content: center;
+          }
+        }
       }
     }
   }

themes/openaq/layouts/partials/footer.html

@@ -3,9 +3,7 @@
     <section class="nav-section">
       <img src="/svg/logo_white.svg" alt="" class="footer-logo" />
       <nav class="footer-nav">
-        <a class="type-navigation-2 text-white footer-home" href="/"
-          >Home</a
-        >
+        <a class="type-navigation-2 text-white footer-home" href="/">Home</a>
         <a
           class="type-navigation-2 text-white footer-explore"
           href="https://explore.openaq.org"
@@ -16,14 +14,10 @@
           href="https://docs.openaq.org/docs"
           >API</a
         >
-        <a
-          class="type-navigation-2 text-white footer-about"
-          href="/about"
+        <a class="type-navigation-2 text-white footer-about" href="/about"
           >About</a
         >
-        <a
-          class="type-navigation-2 text-white footer-contact"
-          href="/contact"
+        <a class="type-navigation-2 text-white footer-contact" href="/contact"
           >Contact</a
         >
         <a
@@ -34,7 +28,9 @@
       </nav>
     </section>
     <section class="contact-section">
-      <span class="type-subtitle-3 text-white">Stay up to date with our quarterly newsletter</span>
+      <span class="type-subtitle-3 text-white"
+        >Stay up to date with our quarterly newsletter</span
+      >
       <form
         action="//openaq.us10.list-manage.com/subscribe/post?u=ca93b2911fff40db15f6e7203&amp;id=e65a8618a1"
         method="post"
@@ -72,17 +68,11 @@
           class="text-input"
         />
 
-        <button
-          class="btn btn-primary js-footer-subscribe"
-          type="submit"
-        >
+        <button class="btn btn-primary js-footer-subscribe" type="submit">
           Subscribe
         </button>
 
-        <div
-          style="position: absolute; left: -5000px"
-          aria-hidden="true"
-        >
+        <div style="position: absolute; left: -5000px" aria-hidden="true">
           <input
             type="text"
             name="b_ca93b2911fff40db15f6e7203_e65a8618a1"
@@ -158,9 +148,7 @@
     >
     <nav class="sub-footer-nav">
       <a class="type-body-4 text-white" href="/terms/">Terms</a>
-      <a class="type-body-4 text-white" href="/privacy/"
-        >Privacy Policy</a
-      >
+      <a class="type-body-4 text-white" href="/privacy/">Privacy Policy</a>
       <a class="type-body-4 text-white" href="/dmca/">DMCA</a>
       <a class="type-body-4 text-white" href="/cookies/">Cookies</a>
     </nav>