change: breakpoints to mixins

NUWildHacks · Jan 18, 2025 · fe5de29 · fe5de29
1 parent 47d6d02
commit fe5de29
Show file tree

Hide file tree

Showing 8 changed files with 2,122 additions and 175 deletions.
diff --git a/src/components/EmailList/EmailList.scss b/src/components/EmailList/EmailList.scss
@@ -1,4 +1,5 @@
 @use "../../shared/colors";
+@use "../../shared/breakpoints";
 
 .email_list__container {
   display: flex;
@@ -13,9 +14,17 @@
     font-family: "Sour Gummy", sans-serif;
     font-optical-sizing: auto;
     font-weight: 900;
-    font-size: 1.25rem;
+    font-size: 1rem;
     box-shadow: 0px 8px 0px 0px rgba(77, 115, 138, 0.15);
 
+    @include breakpoints.sm {
+      font-size: 1.25rem;
+    }
+
+    @include breakpoints.xs {
+      font-size: 1.2rem;
+    }
+
     &:hover {
       border-color: #85abdf;
       color: #85abdf;
@@ -94,19 +103,3 @@
     }
   }
 }
-
-@media (max-width: 800px) {
-  .email_list__container {
-    #email_list__button {
-      font-size: 1.2rem;
-    }
-  }
-}
-
-@media (max-width: 600px) {
-  .email_list__container {
-    #email_list__button {
-      font-size: 1rem;
-    }
-  }
-}
diff --git a/src/components/FAQ/FAQ.scss b/src/components/FAQ/FAQ.scss
@@ -1,4 +1,5 @@
 @use "../../shared/colors";
+@use "../../shared/breakpoints";
 
 .sour-gummy-heading {
   font-family: "Sour Gummy", sans-serif;
@@ -14,29 +15,60 @@
 
 .faq__wrapper {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   background-color: colors.$global-very-dark-green;
   justify-content: center;
   overflow: visible;
+  margin: 0;
+
+  @include breakpoints.sm {
+    flex-direction: row;
+  }
+
+  .faq__tree {
+    visibility: hidden;
+    height: 0;
+    width: 0;
+
+    @include breakpoints.sm {
+      height: auto;
+      width: auto;
+      visibility: visible;
+    }
+  }
 
   .faq__right_side {
-    width: 60%;
-    margin-left: 1rem;
-    margin-right: 1rem;
+    margin: 0;
+    width: 100%;
+
+    @include breakpoints.sm {
+      width: 60%;
+      margin: 0 1rem;
+    }
   }
 
   .faq__header {
     font-size: 2rem;
     margin-bottom: 1rem;
     color: colors.$global-yellow-1;
     @extend .sour-gummy-heading;
+    padding: 1rem;
+
+    @include breakpoints.sm {
+      padding: 0;
+    }
   }
 
   .faq__subheader {
     font-size: 1.7rem;
     margin-bottom: 1rem;
     color: colors.$global-light;
     @extend .sour-gummy-subheading;
+    padding: 1rem;
+
+    @include breakpoints.sm {
+      padding: 0;
+    }
   }
 
   .faq__questionlist {
@@ -50,47 +82,20 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    padding: 1rem;
+
+    @include breakpoints.sm {
+      padding: 0;
+    }
 
     .faq__questions_column {
       display: flex;
       flex-direction: column;
       gap: 1rem;
-    }
-  }
-}
-
-@media (max-width: 800px) {
-  .faq__wrapper {
-    margin: 0;
-    flex-direction: column;
-
-    .faq__tree {
-      visibility: hidden;
-      height: 0;
-      width: 0;
-    }
-
-    .faq__right_side {
-      margin: 0;
       width: 100%;
-    }
-
-    .faq__header {
-      padding: 1rem;
-    }
-
-    .faq__subheader {
-      padding: 1rem;
-    }
-
-    .faq__questions_container {
-      flex-direction: column;
-      gap: 1rem;
-      padding: 1rem;
-
-      .faq__questions_column {
-        width: 100%;
+      @include breakpoints.sm {
+        width: auto;
       }
     }
   }
-}
+}
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -1,4 +1,5 @@
 @use "../../shared/colors";
+@use "../../shared/breakpoints";
 
 .sour-gummy-heading {
   font-family: "Sour Gummy", sans-serif;
@@ -20,20 +21,31 @@
 
 #footer {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
+  flex-direction: column;
   gap: 0.5rem;
   align-items: center;
   padding-left: 2rem;
   padding-right: 2rem;
 
+  @include breakpoints.sm {
+    flex-direction: row;
+  }
+
   .footer__flexbox {
-    width: 33%;
     display: flex;
     flex-direction: row;
     gap: 1em;
     text-wrap: nowrap;
+    padding: 0.5rem;
+    width: 100%;
     align-items: center;
+    justify-content: center;
+
+    @include breakpoints.sm {
+      padding: 0;
+      width: 33%;
+    }
 
     .footer__image {
       img {
@@ -55,8 +67,12 @@
 
   .footer__school_image {
     display: flex;
-    justify-content: end;
     align-items: center;
+
+    @include breakpoints.sm {
+      justify-content: end;
+    }
+
     img {
       width: 12rem;
     }
@@ -70,16 +86,3 @@
     color: colors.$global-light;
   }
 }
-
-@media (max-width: 800px) {
-  #footer {
-    flex-direction: column;
-
-    .footer__flexbox {
-      padding: 0.5rem;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -1,8 +1,9 @@
 @use "../../shared/colors";
+@use "../../shared/breakpoints";
 
 #navigation__main_wrapper {
   padding-left: 2rem;
-  padding-right: 2rem;
+  padding-right: 1rem;
   padding-top: 1rem;
 
   display: flex;
@@ -13,6 +14,10 @@
   position: sticky;
   top: 0;
 
+  @include breakpoints.sm {
+    padding-right: 2rem;
+  }
+
   .navigation__logo_wrapper {
     width: 96px;
     min-width: 96px;
@@ -24,10 +29,16 @@
 
   .navigation__bar_wrapper {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column;
     justify-content: center;
-    align-items: center;
-    gap: 1rem;
+    gap: 0;
+    align-items: end;
+
+    @include breakpoints.sm {
+      flex-direction: row-reverse;
+      align-items: center;
+      gap: 1rem;
+    }
 
     button {
       font-weight: 800;
@@ -84,14 +95,3 @@
     }
   }
 }
-
-@media (max-width: 800px) {
-  #navigation__main_wrapper {
-    padding-right: 1rem;
-    .navigation__bar_wrapper {
-      flex-direction: column;
-      align-items: end;
-      gap: 0;
-    }
-  }
-}