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