refactor: headlines (Guidelines 2.0) (#23)

* refactor(headlines): font-weight & line-height declarations and order

* feat(headlines): added responsive sizes

* refactor: corrected the font-weight value for headlines

* refactor: quotes

* chore: some optimization

* chore: switch to unitless declarations

* refactor: calculate the headlines line-height

* chore: simplification

* chore: satisfy the sass compiler

Author: mfranzke

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
 	),

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;

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;
+		}
 	}
 }