diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index b97b14e..d5df8fb 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -10,6 +10,24 @@ $body-line-height: 1.4 !default; $content-line-height: 1.6 !default; $body-heading-line-height: 1.25 !default; +// +// Font size +// `-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 // diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss index 1718a93..5207fcd 100644 --- a/_sass/support/mixins/_typography.scss +++ b/_sass/support/mixins/_typography.scss @@ -1,86 +1,84 @@ -// Font size - @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-sm !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-sm !important; } }