From 87a59ef8ef28bad9492843b0226a841073cd472f Mon Sep 17 00:00:00 2001 From: Paul DeBruicker Date: Fri, 26 Jun 2020 11:35:58 -0700 Subject: [PATCH 1/5] make font-sizes sass variables so they can be changed --- _sass/support/mixins/_typography.scss | 52 ++++++++++++++++----------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss index 1718a93..02e5b86 100644 --- a/_sass/support/mixins/_typography.scss +++ b/_sass/support/mixins/_typography.scss @@ -1,86 +1,98 @@ // Font size +$font-size-1: 9px; +$font-size-1-mq: 10px; +$font-size-2: 11px; //h4 - uppercased!, h6 not uppercased, text-small +$font-size-3: 12px; //h5 +$font-size-4: 15px; +$font-size-5: 16px; //h3 +$font-size-6: 18px; //h2 +$font-size-7: 24px; +$font-size-8: 32px;//h1 +$font-size-9: 36px; +$font-size-10: 42px; +$font-size-10-mq: 48px; @mixin fs-1 { - font-size: 9px !important; + font-size: $font-size-1 !important; @include mq(sm) { - font-size: 10px !important; + font-size: $font-size-1-mq !important; } } @mixin fs-2 { - font-size: 11px !important; + font-size: $font-size-2 !important; @include mq(sm) { - font-size: 12px !important; + font-size: $font-size-3 !important; } } @mixin fs-3 { - font-size: 12px !important; + font-size: $font-size-3 !important; @include mq(sm) { - font-size: 14px !important; + font-size: $font-size-4 !important; } } @mixin fs-4 { - font-size: 15px !important; + font-size: $font-size-4 !important; @include mq(sm) { - font-size: 16px !important; + font-size: $font-size-5 !important; } } @mixin fs-5 { - font-size: 16px !important; + font-size: $font-size-5 !important; @include mq(sm) { - font-size: 18px !important; + font-size: $font-size-6 !important; } } @mixin fs-6 { - font-size: 18px !important; + font-size: $font-size-6 !important; @include mq(sm) { - font-size: 24px !important; + font-size: $font-size-7 !important; line-height: $body-heading-line-height; } } @mixin fs-7 { - font-size: 24px !important; + font-size: $font-size-7 !important; line-height: $body-heading-line-height; @include mq(sm) { - font-size: 32px !important; + font-size: $font-size-8 !important; } } @mixin fs-8 { - font-size: 32px !important; + font-size: $font-size-8 !important; line-height: $body-heading-line-height; @include mq(sm) { - font-size: 36px !important; + font-size: $font-size-9!important; } } @mixin fs-9 { - font-size: 36px !important; + font-size: $font-size-9 !important; line-height: $body-heading-line-height; @include mq(sm) { - font-size: 42px !important; + font-size: $font-size-10 !important; } } @mixin fs-10 { - font-size: 42px !important; + font-size: $font-size-10 !important; line-height: $body-heading-line-height; @include mq(sm) { - font-size: 48px !important; + font-size: $font-size-10-mq !important; } } From d90482d7194119611163f98c90e6ea1f3a560ba9 Mon Sep 17 00:00:00 2001 From: Paul DeBruicker Date: Sun, 28 Jun 2020 14:52:15 -0700 Subject: [PATCH 2/5] put the font size variables in variables.scss and rename the ones misnamed -mq --- _sass/support/_variables.scss | 14 ++++++++++++++ _sass/support/mixins/_typography.scss | 18 ++---------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 3665a36..f32c65b 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -10,6 +10,20 @@ $body-line-height: 1.4 !default; $content-line-height: 1.6 !default; $body-heading-line-height: 1.25 !default; +// Font size +$font-size-1: 9px; +$font-size-1-sm: 10px; +$font-size-2: 11px; //h4 - uppercased!, h6 not uppercased, text-small +$font-size-3: 12px; //h5 +$font-size-4: 15px; +$font-size-5: 16px; //h3 +$font-size-6: 18px; //h2 +$font-size-7: 24px; +$font-size-8: 32px;//h1 +$font-size-9: 36px; +$font-size-10: 42px; +$font-size-10-sm: 48px; + // // Colors // diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss index 02e5b86..62b7812 100644 --- a/_sass/support/mixins/_typography.scss +++ b/_sass/support/mixins/_typography.scss @@ -1,22 +1,8 @@ -// Font size -$font-size-1: 9px; -$font-size-1-mq: 10px; -$font-size-2: 11px; //h4 - uppercased!, h6 not uppercased, text-small -$font-size-3: 12px; //h5 -$font-size-4: 15px; -$font-size-5: 16px; //h3 -$font-size-6: 18px; //h2 -$font-size-7: 24px; -$font-size-8: 32px;//h1 -$font-size-9: 36px; -$font-size-10: 42px; -$font-size-10-mq: 48px; - @mixin fs-1 { font-size: $font-size-1 !important; @include mq(sm) { - font-size: $font-size-1-mq !important; + font-size: $font-size-1-sm !important; } } @@ -93,6 +79,6 @@ $font-size-10-mq: 48px; line-height: $body-heading-line-height; @include mq(sm) { - font-size: $font-size-10-mq !important; + font-size: $font-size-10-sm !important; } } From e8d60818ed4c78250392af3104c36ef6741486a3 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 30 Jun 2020 12:46:44 -0400 Subject: [PATCH 3/5] Update _variables.scss --- _sass/support/_variables.scss | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index f32c65b..ff32267 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -10,19 +10,23 @@ $body-line-height: 1.4 !default; $content-line-height: 1.6 !default; $body-heading-line-height: 1.25 !default; +// // Font size -$font-size-1: 9px; -$font-size-1-sm: 10px; -$font-size-2: 11px; //h4 - uppercased!, h6 not uppercased, text-small -$font-size-3: 12px; //h5 -$font-size-4: 15px; -$font-size-5: 16px; //h3 -$font-size-6: 18px; //h2 -$font-size-7: 24px; -$font-size-8: 32px;//h1 -$font-size-9: 36px; -$font-size-10: 42px; -$font-size-10-sm: 48px; +// `-sm` suffix is the size at the small (and above) media query +// + +$font-size-1: 9px !default; +$font-size-1-sm: 10px !default; +$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small +$font-size-3: 12px !default; //h5 +$font-size-4: 15px !default; +$font-size-5: 16px !default; //h3 +$font-size-6: 18px !default; //h2 +$font-size-7: 24px !default; +$font-size-8: 32px !default; //h1 +$font-size-9: 36px !default; +$font-size-10: 42px !default; +$font-size-10-sm: 48px !default; // // Colors From e358b8d9148d2203b08ab6436090928cfc9a6065 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 20 Jul 2020 17:39:30 -0400 Subject: [PATCH 4/5] Update _variables.scss --- _sass/support/_variables.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 35a64f7..d5df8fb 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -17,13 +17,13 @@ $body-heading-line-height: 1.25 !default; $font-size-1: 9px !default; $font-size-1-sm: 10px !default; -$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small -$font-size-3: 12px !default; //h5 +$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small +$font-size-3: 12px !default; //h5 $font-size-4: 15px !default; -$font-size-5: 16px !default; //h3 -$font-size-6: 18px !default; //h2 +$font-size-5: 16px !default; //h3 +$font-size-6: 18px !default; //h2 $font-size-7: 24px !default; -$font-size-8: 32px !default; //h1 +$font-size-8: 32px !default; //h1 $font-size-9: 36px !default; $font-size-10: 42px !default; $font-size-10-sm: 48px !default; From 721f322e41a179773ad311ada171d0a2b0013dfb Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Mon, 20 Jul 2020 17:48:56 -0400 Subject: [PATCH 5/5] Update _typography.scss --- _sass/support/mixins/_typography.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss index 62b7812..5207fcd 100644 --- a/_sass/support/mixins/_typography.scss +++ b/_sass/support/mixins/_typography.scss @@ -42,7 +42,7 @@ font-size: $font-size-6 !important; @include mq(sm) { - font-size: $font-size-7 !important; + font-size: $font-size-7 !important; line-height: $body-heading-line-height; } } @@ -52,7 +52,7 @@ line-height: $body-heading-line-height; @include mq(sm) { - font-size: $font-size-8 !important; + font-size: $font-size-8 !important; } } @@ -61,7 +61,7 @@ line-height: $body-heading-line-height; @include mq(sm) { - font-size: $font-size-9!important; + font-size: $font-size-9 !important; } }