refactor: spacing and layout WIP

components/apprentice-qualities/apprentice-qualities.module.scss

@@ -1,11 +1,13 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
+@use '../../styles/mixins' as *;
 
 .primary {
   color: $c-highlight-green;
 }
 
 .apprentice-qualities {
+  @include vertical-section-spacing();
   width: $component-width;
 
   &__main {

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 {
-  width: $component-width;
+  @include horizontal-section-spacing();
+  @include vertical-section-spacing();
   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%);
 
@@ -85,6 +86,7 @@
 
         // Images below are placed in the grid in order from top to bottom and left to right
         &:nth-child(1) {
+          margin-top: 7px;
           grid-area: 2 / 1 / 6 / 22;
           background-color: $c-highlight-pink;
         }

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

@@ -1,23 +1,23 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
 @use '../../styles/fonts';
+@use '../../styles/mixins' as *;
 
 .current-apprentices {
-  width: $component-width;
+  @include horizontal-section-spacing();
+  @include vertical-section-spacing();
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
 
   &__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-bottom: 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;
     }
@@ -65,12 +63,10 @@
       flex-direction: row;
       justify-content: flex-start;
       flex-wrap: wrap;
-    }
-  }
 
-  @media (min-width: 70rem) {
-    &__content {
-      padding: 4rem 0;
+      &__card {
+        margin-right: 2rem;
+      }
     }
   }
 }

components/hero/hero.module.scss

@@ -1,27 +1,9 @@
 @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?):
-  // min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,8 +20,9 @@
   }
 
   &__container {
+    @include horizontal-section-spacing();
+    @include vertical-section-spacing();
     max-width: $max-content-width;
-    padding: 1rem;
     display: flex;
     flex-direction: column;
   }
@@ -54,6 +37,10 @@
     flex-direction: column;
     order: 1;
 
+    h1 {
+      font-size: 2.65rem;
+    }
+
     h1,
     p {
       padding-bottom: 1rem;
@@ -101,6 +88,7 @@
         }
 
         &:nth-child(4) {
+          margin-top: -3px;
           grid-area: 12 / 18 / 17 / 41;
           background-color: $c-highlight-pink;
         }
@@ -187,7 +175,6 @@
 
       &--full {
         display: block;
-        padding: 1rem;
         margin-bottom: -10rem;
       }
     }
@@ -199,7 +186,7 @@
 
       h1 {
         width: 60%;
-        font-size: 4rem;
+        font-size: 3.4rem;
       }
 
       p {
@@ -221,11 +208,11 @@
   }
 
   @media (min-width: 70.25rem) {
-    padding: 5rem;
     box-sizing: border-box;
 
     &__sparkbox-logo {
       &--full {
+        padding: 1rem;
         margin-bottom: 0;
       }
     }
@@ -241,13 +228,13 @@
       margin-top: 2rem;
 
       h1 {
-        font-size: 5rem;
+        font-size: 4.5rem;
         width: 100%;
       }
 
       p {
         font-size: 1.2rem;
-        width: 100%;
+        width: 95%;
       }
     }
 

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,41 +1,46 @@
 @use '../../styles/colors' as *;
 @use '../../styles/spacing' as *;
 @use '../../styles/fonts' as *;
+@use '../../styles/mixins' as *;
 
 .previous-apprentices {
+  @include horizontal-section-spacing();
+  box-sizing: border-box;
   padding-top: 30rem;
-  margin-top: -30rem;
-
-  width: $component-width;
+  margin-top: -25rem;
+  z-index: -100;
 
   &__header {
     display: block;
     max-width: $max-content-width;
     margin: auto;
 
+    h2 {
+      font-size: 2rem;
+      font-family: 'Sole Sans Extended', sans-serif;
+    }
+
     h2,
     p {
       display: inline-block;
     }
   }
 
   &__legend {
-    padding-top: 0.5rem;
-
     p {
-      padding-left: 1rem;
+      margin: 0.75rem 2rem 0.5rem 0;
+      margin-right: 2rem;
     }
 
-    svg {
-      padding-left: 4rem;
+    svg:nth-child(1) {
+      margin-right: 0.5rem;
     }
   }
 
   &__groups {
-    width: $max-content-width;
     display: flex;
-    justify-content: center;
-    column-gap: 1rem;
+    justify-content: flex-start;
+    column-gap: 5rem;
     row-gap: 2rem;
     flex-flow: row wrap;
     max-width: $max-content-width;
@@ -45,7 +50,6 @@
 
 .employee-status {
   width: 0.75rem;
-  padding-left: 0.5rem;
   fill: black;
 }
 
@@ -68,14 +72,6 @@
     background-position-x: calc(50% + 38rem);
     background-position-y: 16rem;
 
-    &__header {
-      margin: auto;
-
-      h2 {
-        margin: 0 4rem;
-      }
-    }
-
     &__groups {
       margin: auto;
     }
@@ -100,6 +96,7 @@
     }
 
     &__legend {
+      padding-top: 1rem;
       float: right;
     }
 

styles/_mixins.scss

@@ -0,0 +1,55 @@
+@use './styles/spacing' as *;
+
+@mixin horizontal-section-spacing {
+  padding-left: $small-screen-padding;
+  padding-right: $small-screen-padding;
+  width: $component-width;
+
+  @media (min-width: 48rem) {
+    padding-left: $medium-screen-padding;
+    padding-right: $medium-screen-padding;
+  }
+
+  @media (min-width: 62rem) {
+    padding-left: $large-screen-padding;
+    padding-right: $large-screen-padding;
+  }
+
+  @media (min-width: 75rem) {
+    padding-left: $xlarge-screen-padding;
+    padding-right: $xlarge-screen-padding;
+  }
+}
+
+@mixin vertical-section-spacing {
+  padding-top: $small-screen-padding;
+
+  @media (min-width: 48rem) {
+    padding-top: $medium-screen-padding;
+  }
+
+  @media (min-width: 62rem) {
+    padding-top: $large-screen-padding;
+  }
+
+  @media (min-width: 75rem) {
+    padding-top: $xlarge-screen-padding;
+  }
+}
+
+@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;
+  }
+}

styles/_spacing.scss

@@ -1,2 +1,6 @@
 $component-width: 100%;
 $max-content-width: 68.5rem;
+$small-screen-padding: 9%;
+$medium-screen-padding: 3.75rem;
+$large-screen-padding: 6rem;
+$xlarge-screen-padding: 8rem;