diff --git a/source/_patterns/00-base/type/_fonts.variables.scss b/source/_patterns/00-base/type/_fonts.variables.scss index 48ea3b4cb6..18d2417607 100644 --- a/source/_patterns/00-base/type/_fonts.variables.scss +++ b/source/_patterns/00-base/type/_fonts.variables.scss @@ -13,7 +13,7 @@ $font-families: ( "font-family": "DB Screen Head", "font-filename": "dbscreenhead-black", // black/"bold" font weight - "font-weight": 700, + "font-weight": 900, "font-style": normal, "font-local": true ), diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss index b6aa8a4f7c..a6b9a8ff6e 100644 --- a/source/_patterns/01-elements/headline/_headline.variables.scss +++ b/source/_patterns/01-elements/headline/_headline.variables.scss @@ -1,14 +1,11 @@ @import "../../../css/helpers/functions"; -$rea-main-h1-font-size: to-rem( - $pxValue: 36 -) !default; // * TODO: possibly rework variable naming -$rea-main-h2-font-size: to-rem( - $pxValue: 24 -) !default; // * TODO: possibly rework variable naming -$rea-main-h3-font-size: to-rem( - $pxValue: 20 -) !default; // * TODO: possibly rework variable naming -$rea-main-h4-font-size: to-rem( - $pxValue: 18 -) !default; // * TODO: possibly rework variable naming +// * TODO: possibly rework variable naming +$rea-main-h1-font-size: 36 !default; +$rea-main-h1-font-size-small: 28 !default; +$rea-main-h2-font-size: 24 !default; +$rea-main-h2-font-size-small: 20 !default; +$rea-main-h3-font-size: 20 !default; +$rea-main-h3-font-size-small: 18 !default; +$rea-main-h4-font-size: 18 !default; +$rea-main-h4-font-size-small: 16 !default; diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 9bf394c042..2ceca259b2 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -1,13 +1,6 @@ +@use "sass:math"; @import "headline.variables"; -h1, -h2, -h3 { - &.elm-headline { - font-family: $db-font-family-headline; - } -} - .elm-headline { margin-bottom: to-rem($pxValue: 16); @@ -19,31 +12,68 @@ h1, h2, h3 { &.elm-headline { - font-weight: 700; + font-family: $db-font-family-headline; + font-weight: 900; } } -h4 { +h1 { &.elm-headline { - font-size: $rea-main-h4-font-size; // * TODO: possibly rework variable naming - font-weight: 400; + font-size: to-rem( + $pxValue: $rea-main-h1-font-size + ); // * TODO: possibly rework variable naming + line-height: math.div(40, $rea-main-h1-font-size); + @media screen and (max-width: 767px) { + font-size: to-rem( + $pxValue: $rea-main-h1-font-size-small + ); // * TODO: possibly rework variable naming + line-height: 1.14; + } } } -h1 { +h2 { &.elm-headline { - font-size: $rea-main-h1-font-size; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h2-font-size + ); // * TODO: possibly rework variable naming + line-height: math.div(28, $rea-main-h2-font-size); + @media screen and (max-width: 767px) { + font-size: to-rem( + $pxValue: $rea-main-h2-font-size-small + ); // * TODO: possibly rework variable naming + line-height: 1.2; + } } } -h2 { +h3 { &.elm-headline { - font-size: $rea-main-h2-font-size; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h3-font-size + ); // * TODO: possibly rework variable naming + line-height: math.div(24, $rea-main-h3-font-size); + @media screen and (max-width: 767px) { + font-size: to-rem( + $pxValue: $rea-main-h3-font-size-small + ); // * TODO: possibly rework variable naming + line-height: 1.33; + } } } -h3 { +h4 { &.elm-headline { - font-size: $rea-main-h3-font-size; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h4-font-size + ); // * TODO: possibly rework variable naming + font-weight: 400; + line-height: math.div(24, $rea-main-h4-font-size); + @media screen and (max-width: 767px) { + font-size: to-rem( + $pxValue: $rea-main-h4-font-size-small + ); // * TODO: possibly rework variable naming + line-height: 1.25; + } } }