ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor typography font sizes into variables

This commit is contained in:
Ramon Wenger 2022-07-15 17:37:06 +02:00
parent 33cee0c700
commit 25531282aa
1 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/styles/mixins/_typography.scss
View File

@ -1,37 +1,46 @@
$largest-font: toRem(64px);
$larger-font: toRem(44px);
$large-font-size: toRem(34px);
$slightly-large-font-size: toRem(24px);
$regular-font-size: toRem(18px);
$slightly-small-font-size: toRem(16px);
$small-font-size: toRem(14px);
$tiny-font-size: toRem(11px);
@mixin main-title { @mixin main-title {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 800; font-weight: 800;
font-size: toRem(64px); font-size: $largest-font;
} }
@mixin heading-1 { @mixin heading-1 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
font-size: toRem(44px); font-size: $larger-font;
} }
@mixin heading-2 { @mixin heading-2 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
font-size: toRem(34px); font-size: $large-font-size;
} }
@mixin heading-3 { @mixin heading-3 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
font-size: toRem(24px); font-size: $slightly-large-font-size;
} }
@mixin heading-4 { @mixin heading-4 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
font-size: toRem(18px); font-size: $regular-font-size;
} }
@mixin sub-heading { @mixin sub-heading {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 400; font-weight: 400;
font-size: toRem(16px); font-size: $slightly-small-font-size;
} }
@mixin modal-heading { @mixin modal-heading {
@ -43,18 +52,18 @@
@mixin regular-text { @mixin regular-text {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 400; font-weight: 400;
font-size: toRem(18px); font-size: $regular-font-size;
} }
@mixin small-text { @mixin small-text {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 400; font-weight: 400;
//font-size: toRem(16px); todo: did this really change or is this only for the subnavigation //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
font-size: toRem(14px); font-size: $small-font-size;
} }
@mixin tiny-text { @mixin tiny-text {
font-size: toRem(11px); font-size: $tiny-font-size;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-silver-dark; color: $color-silver-dark;
@ -62,7 +71,7 @@
@mixin aside-text { @mixin aside-text {
@include regular-text; @include regular-text;
font-size: toRem(14px); font-size: $small-font-size;
} }
@mixin aside-with-cheese { @mixin aside-with-cheese {
@ -73,19 +82,19 @@
@mixin navigation-link { @mixin navigation-link {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-charcoal-dark; color: $color-charcoal-dark;
font-size: toRem(18px); font-size: $regular-font-size;
font-weight: 600; font-weight: 600;
} }
@mixin large-link { @mixin large-link {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: toRem(18px); font-size: $regular-font-size;
font-weight: 400; font-weight: 400;
} }
@mixin meta-title { @mixin meta-title {
color: $color-silver-dark; color: $color-silver-dark;
font-size: toRem(36px); font-size: $large-font-size;
font-weight: 300; font-weight: 300;
font-family: $serif-font-family; font-family: $serif-font-family;
line-height: $default-heading-line-height; line-height: $default-heading-line-height;
@ -99,16 +108,19 @@
@mixin lead-paragraph { @mixin lead-paragraph {
font-family: $serif-font-family; font-family: $serif-font-family;
line-height: 1.4; line-height: 1.4;
font-size: toRem(26px); font-size: $regular-font-size;
@include desktop {
font-size: $slightly-large-font-size;
}
} }
@mixin regular-paragraph { @mixin regular-paragraph {
font-family: $serif-font-family; font-family: $serif-font-family;
font-size: toRem(18px); font-size: $regular-font-size;
} }
@mixin link-base { @mixin link-base {
font-size: toRem(14px); font-size: $slightly-small-font-size;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
cursor: pointer; cursor: pointer;