refactor: spacing and layout WIP

- Created mixin for section padding
- Added mixin to every section except ApprenticeQualities
- Refactored PreviousApprenticeGroups to align to have all groups align to the left
- Refactored font sizes in the hero
- Refactored PreviousApprenticeGroup to make sure triangle svg does not wrap
- Moved visually hidden mixin from hero sass module to mixin partials file

FSA21V2-156

Author: Angus Chang

components/call-to-action/call-to-action.module.scss

@@ -1,12 +1,13 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
+@use '../../styles/mixins' as *;
 
 .call-to-action {
+  @include section-padding();
   width: $component-width;
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding: 1rem;
   box-sizing: border-box;
   background: radial-gradient(110% 110% at 15.71% 0%, $background-color  85%, #0b1618 100%);
 

components/current-apprentices/current-apprentices.module.scss

@@ -1,8 +1,11 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
 @use '../../styles/fonts';
+@use '../../styles/mixins' as *;
 
 .current-apprentices {
+  @include section-padding();
+  box-sizing: border-box;
   width: $component-width;
   display: flex;
   flex-direction: column;
@@ -11,13 +14,10 @@
   &__content {
     width: 100%;
     max-width: $max-content-width;
-    box-sizing: border-box;
-    padding: 1rem;
   }
 
   &__header {
     text-align: center;
-    padding: 1rem;
 
     h2 {
       font-size: 2rem;
@@ -36,11 +36,13 @@
     align-items: center;
 
     &__card {
+      margin-right: 2rem;
+
       img {
         display: none;
       }
+
       width: 18rem;
-      padding: 1rem;
     }
 
     @supports (display: grid) {
@@ -52,11 +54,7 @@
     }
   }
 
-  @media (min-width: 45rem) {
-    &__content {
-      padding: 5rem 2rem;
-    }
-
+  @media (min-width: 47.9rem) {
     &__header {
       text-align: left;
     }
@@ -67,10 +65,4 @@
       flex-wrap: wrap;
     }
   }
-
-  @media (min-width: 70rem) {
-    &__content {
-      padding: 4rem 0;
-    }
-  }
 }

components/hero/hero.module.scss

@@ -1,26 +1,10 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
-
-@mixin visually-hidden {
-  position: fixed;
-  right: 100%;
-  bottom: 100%;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-
-  &:focus {
-    left: 0;
-    right: auto;
-    top: 0;
-    bottom: auto;
-    clip: auto;
-    clip-path: none;
-  }
-}
+@use '../../styles/mixins' as *;
 
 .hero {
   width: $component-width;
-  // The line below needs should be reviewed by another developer or designer (min height or no min height?):
+  // The line below needs should be reviewed by another developer or designer (should hero be 100vh?)):
   // min-height: 100vh;
   display: flex;
   justify-content: center;
@@ -38,8 +22,8 @@
   }
 
   &__container {
+    @include section-padding();
     max-width: $max-content-width;
-    padding: 1rem;
     display: flex;
     flex-direction: column;
   }
@@ -54,6 +38,10 @@
     flex-direction: column;
     order: 1;
 
+    h1 {
+      font-size: 3rem;
+    }
+
     h1,
     p {
       padding-bottom: 1rem;
@@ -199,7 +187,7 @@
 
       h1 {
         width: 60%;
-        font-size: 4rem;
+        font-size: 3.4rem;
       }
 
       p {
@@ -221,7 +209,6 @@
   }
 
   @media (min-width: 70.25rem) {
-    padding: 5rem;
     box-sizing: border-box;
 
     &__sparkbox-logo {
@@ -241,7 +228,7 @@
       margin-top: 2rem;
 
       h1 {
-        font-size: 5rem;
+        font-size: 4.5rem;
         width: 100%;
       }
 

components/previous-apprentices-group/previous-apprentices-group.module.scss

@@ -16,6 +16,8 @@
   }
 
   &__apprentice {
+    width: 10rem;
+
     &:not(&:last-child) {
       padding-bottom: 0.5rem;
     }
@@ -24,6 +26,6 @@
 
 @media (min-width: 45rem) {
   .previous-apprentices-group {
-    flex-basis: 20%;
+    flex-basis: 17%;
   }
 }

components/previous-apprentices/previous-apprentices.module.scss

@@ -1,8 +1,11 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
 @use '../../styles/fonts' as *;
+@use '../../styles/mixins' as *;
 
 .previous-apprentices {
+  @include section-padding();
+  box-sizing: border-box;
   width: $component-width;
 
   &__header {
@@ -14,29 +17,25 @@
     p {
       display: inline-block;
     }
-
-    h2 {
-      margin: 0 6rem;
-    }
   }
 
   &__legend {
     padding-top: 0.5rem;
     margin-right: 2.5rem;
 
     p {
-      padding-left: 1rem;
+      margin-right: 2rem;
     }
 
-    svg {
-      padding-left: 4rem;
+    svg:nth-child(1) {
+      margin-right: 0.5rem;
     }
   }
 
   &__groups {
     display: flex;
-    justify-content: center;
-    column-gap: 1rem;
+    justify-content: flex-start;
+    column-gap: 3rem;
     row-gap: 2rem;
     flex-flow: row wrap;
     max-width: $max-content-width;
@@ -46,7 +45,6 @@
 
 .employee-status {
   width: 0.75rem;
-  padding-left: 0.5rem;
   fill: black;
 }
 
@@ -65,10 +63,6 @@
   .previous-apprentices {
     &__header {
       margin: auto;
-
-      h2 {
-        margin: 0 4rem;
-      }
     }
 
     &__groups {

styles/_mixins.scss

@@ -0,0 +1,32 @@
+@mixin section-padding {
+  padding: 9%;
+
+  @media (min-width: 768px) {
+    padding: 3.75rem;
+  }
+
+  @media (min-width: 992px) {
+    padding: 6rem;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 8rem;
+  }
+}
+
+@mixin visually-hidden {
+  position: fixed;
+  right: 100%;
+  bottom: 100%;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+  &:focus {
+    left: 0;
+    right: auto;
+    top: 0;
+    bottom: auto;
+    clip: auto;
+    clip-path: none;
+  }
+}