From 9855501605bdbb0b2b760b1213dfacf29b316728 Mon Sep 17 00:00:00 2001 From: Angus Chang Date: Wed, 1 Dec 2021 09:47:55 -0500 Subject: [PATCH 1/3] refactor: spacing and layout WIP - Created mixin for section padding - Added mixin to every section except ApprenticeQualities & PreviousApprentices - PreviousApprentices has custom padding due to the svg logo - gave PreviousApprentices a negative z-index because padding covers CurrentApprentices cmp - 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 --- .../call-to-action/call-to-action.module.scss | 3 +- .../current-apprentices.module.scss | 24 ++++++-------- components/hero/hero.module.scss | 33 +++++-------------- .../previous-apprentices-group.module.scss | 4 ++- .../previous-apprentices.module.scss | 29 +++++++--------- styles/_mixins.scss | 32 ++++++++++++++++++ 6 files changed, 67 insertions(+), 58 deletions(-) create mode 100644 styles/_mixins.scss diff --git a/components/call-to-action/call-to-action.module.scss b/components/call-to-action/call-to-action.module.scss index 5611f0c..fa5801e 100644 --- a/components/call-to-action/call-to-action.module.scss +++ b/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%); diff --git a/components/current-apprentices/current-apprentices.module.scss b/components/current-apprentices/current-apprentices.module.scss index 8720469..8edaa10 100644 --- a/components/current-apprentices/current-apprentices.module.scss +++ b/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-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; + } } } } diff --git a/components/hero/hero.module.scss b/components/hero/hero.module.scss index f9e57aa..2e8a38d 100644 --- a/components/hero/hero.module.scss +++ b/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,8 @@ } &__container { + @include section-padding(); max-width: $max-content-width; - padding: 1rem; display: flex; flex-direction: column; } @@ -54,6 +36,10 @@ flex-direction: column; order: 1; + h1 { + font-size: 2.65rem; + } + h1, p { padding-bottom: 1rem; @@ -199,7 +185,7 @@ h1 { width: 60%; - font-size: 4rem; + font-size: 3.4rem; } p { @@ -221,7 +207,6 @@ } @media (min-width: 70.25rem) { - padding: 5rem; box-sizing: border-box; &__sparkbox-logo { @@ -241,13 +226,13 @@ margin-top: 2rem; h1 { - font-size: 5rem; + font-size: 4.5rem; width: 100%; } p { font-size: 1.2rem; - width: 100%; + width: 95%; } } diff --git a/components/previous-apprentices-group/previous-apprentices-group.module.scss b/components/previous-apprentices-group/previous-apprentices-group.module.scss index 56cc907..840bdd0 100644 --- a/components/previous-apprentices-group/previous-apprentices-group.module.scss +++ b/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%; } } diff --git a/components/previous-apprentices/previous-apprentices.module.scss b/components/previous-apprentices/previous-apprentices.module.scss index 5f7cdcd..0a4a31a 100644 --- a/components/previous-apprentices/previous-apprentices.module.scss +++ b/components/previous-apprentices/previous-apprentices.module.scss @@ -1,11 +1,14 @@ @use '../../styles/colors' as *; @use '../../styles/spacing' as *; @use '../../styles/fonts' as *; +@use '../../styles/mixins' as *; .previous-apprentices { - padding-top: 30rem; + padding: 30rem 9% 9% 9%; margin-top: -30rem; + z-index: -100; + box-sizing: border-box; width: $component-width; &__header { @@ -20,22 +23,20 @@ } &__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 +46,6 @@ .employee-status { width: 0.75rem; - padding-left: 0.5rem; fill: black; } @@ -68,14 +68,6 @@ background-position-x: calc(50% + 38rem); background-position-y: 16rem; - &__header { - margin: auto; - - h2 { - margin: 0 4rem; - } - } - &__groups { margin: auto; } @@ -100,6 +92,7 @@ } &__legend { + padding-top: 1rem; float: right; } diff --git a/styles/_mixins.scss b/styles/_mixins.scss new file mode 100644 index 0000000..e65c5f5 --- /dev/null +++ b/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; + } +} From 9b1582646f0f6e794dffd2c8469378ab6190bafd Mon Sep 17 00:00:00 2001 From: Angus Chang Date: Wed, 8 Dec 2021 13:15:25 -0500 Subject: [PATCH 2/3] refactor: horizontal and vertical mixins - Abstracted horizontal and vertical padding into their own mixins - Created padding variables for mixins - Added new mixins to hero, current apprentices and call to action - add max width to hero container FSA21V2-156 --- .../apprentice-qualities.module.scss | 2 + .../call-to-action/call-to-action.module.scss | 4 +- .../current-apprentices.module.scss | 4 +- components/hero/hero.module.scss | 5 ++- .../previous-apprentices.module.scss | 14 ++++--- styles/_mixins.scss | 39 +++++++++++++++---- styles/_spacing.scss | 4 ++ 7 files changed, 53 insertions(+), 19 deletions(-) diff --git a/components/apprentice-qualities/apprentice-qualities.module.scss b/components/apprentice-qualities/apprentice-qualities.module.scss index 6ea44fb..c4e5978 100644 --- a/components/apprentice-qualities/apprentice-qualities.module.scss +++ b/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 { diff --git a/components/call-to-action/call-to-action.module.scss b/components/call-to-action/call-to-action.module.scss index fa5801e..1b9466c 100644 --- a/components/call-to-action/call-to-action.module.scss +++ b/components/call-to-action/call-to-action.module.scss @@ -3,8 +3,8 @@ @use '../../styles/mixins' as *; .call-to-action { - @include section-padding(); - width: $component-width; + @include horizontal-section-spacing(); + @include vertical-section-spacing(); display: flex; align-items: center; flex-direction: column; diff --git a/components/current-apprentices/current-apprentices.module.scss b/components/current-apprentices/current-apprentices.module.scss index 8edaa10..cf3e3f6 100644 --- a/components/current-apprentices/current-apprentices.module.scss +++ b/components/current-apprentices/current-apprentices.module.scss @@ -4,9 +4,9 @@ @use '../../styles/mixins' as *; .current-apprentices { - @include section-padding(); + @include horizontal-section-spacing(); + @include vertical-section-spacing(); box-sizing: border-box; - width: $component-width; display: flex; flex-direction: column; align-items: center; diff --git a/components/hero/hero.module.scss b/components/hero/hero.module.scss index 2e8a38d..6a6f0c2 100644 --- a/components/hero/hero.module.scss +++ b/components/hero/hero.module.scss @@ -20,7 +20,8 @@ } &__container { - @include section-padding(); + @include horizontal-section-spacing(); + @include vertical-section-spacing(); max-width: $max-content-width; display: flex; flex-direction: column; @@ -173,7 +174,6 @@ &--full { display: block; - padding: 1rem; margin-bottom: -10rem; } } @@ -211,6 +211,7 @@ &__sparkbox-logo { &--full { + padding: 1rem; margin-bottom: 0; } } diff --git a/components/previous-apprentices/previous-apprentices.module.scss b/components/previous-apprentices/previous-apprentices.module.scss index 0a4a31a..e0b3bc3 100644 --- a/components/previous-apprentices/previous-apprentices.module.scss +++ b/components/previous-apprentices/previous-apprentices.module.scss @@ -4,18 +4,22 @@ @use '../../styles/mixins' as *; .previous-apprentices { - padding: 30rem 9% 9% 9%; - margin-top: -30rem; - z-index: -100; - + @include horizontal-section-spacing(); box-sizing: border-box; - width: $component-width; + padding-top: 30rem; + 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; diff --git a/styles/_mixins.scss b/styles/_mixins.scss index e65c5f5..b03835d 100644 --- a/styles/_mixins.scss +++ b/styles/_mixins.scss @@ -1,16 +1,39 @@ -@mixin section-padding { - padding: 9%; +@use './styles/spacing' as *; - @media (min-width: 768px) { - padding: 3.75rem; +@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: 992px) { - padding: 6rem; + @media (min-width: 62rem) { + padding-top: $large-screen-padding; } - @media (min-width: 1200px) { - padding: 8rem; + @media (min-width: 75rem) { + padding-top: $xlarge-screen-padding; } } diff --git a/styles/_spacing.scss b/styles/_spacing.scss index e96a1c7..08e3830 100644 --- a/styles/_spacing.scss +++ b/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; From 4b106c86b22ae2b15f46e87677783766335cf35b Mon Sep 17 00:00:00 2001 From: Angus Chang Date: Wed, 8 Dec 2021 17:47:47 -0500 Subject: [PATCH 3/3] refactor: hero & cta art - Fixed minor spacing issues with hero and cta art FSA21V2-156 --- components/call-to-action/call-to-action.module.scss | 1 + components/hero/hero.module.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/components/call-to-action/call-to-action.module.scss b/components/call-to-action/call-to-action.module.scss index 1b9466c..87fd7d6 100644 --- a/components/call-to-action/call-to-action.module.scss +++ b/components/call-to-action/call-to-action.module.scss @@ -86,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; } diff --git a/components/hero/hero.module.scss b/components/hero/hero.module.scss index 6a6f0c2..6a433ba 100644 --- a/components/hero/hero.module.scss +++ b/components/hero/hero.module.scss @@ -88,6 +88,7 @@ } &:nth-child(4) { + margin-top: -3px; grid-area: 12 / 18 / 17 / 41; background-color: $c-highlight-pink; }