From 80b60f68a42698c5735a72cc4d8bddcae6147c39 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 26 Sep 2022 14:16:53 +0200 Subject: [PATCH 01/10] refactor(headlines): font-weight & line-height declarations and order --- .../01-elements/headline/headline.scss | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 049d8a3a78..22be7f0302 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -1,4 +1,4 @@ -@import "headline.variables"; +@import 'headline.variables'; h1, h2, @@ -18,27 +18,31 @@ h1, h2, h3 { &.elm-headline { - font-weight: 700; - } -} -h4 { - &.elm-headline { - font-weight: 400; - font-size: $rea-main-h4-font-size; // * TODO: possibly rework variable naming + font-weight: 900; } } h1 { &.elm-headline { font-size: $rea-main-h1-font-size; // * TODO: possibly rework variable naming + line-height: 1.11em; } } h2 { &.elm-headline { font-size: $rea-main-h2-font-size; // * TODO: possibly rework variable naming + line-height: 1.17em; } } h3 { &.elm-headline { font-size: $rea-main-h3-font-size; // * TODO: possibly rework variable naming + line-height: 1.2em; + } +} +h4 { + &.elm-headline { + font-weight: 400; + font-size: $rea-main-h4-font-size; // * TODO: possibly rework variable naming + line-height: 1.33; } } From 33b560b13f3f99ebc014bdc65624cb2fb1dbf23d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 26 Sep 2022 14:27:50 +0200 Subject: [PATCH 02/10] feat(headlines): added responsive sizes --- .../headline/_headline.variables.scss | 14 +++++++++++++- .../_patterns/01-elements/headline/headline.scss | 16 ++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss index b6aa8a4f7c..ef08d0d7c5 100644 --- a/source/_patterns/01-elements/headline/_headline.variables.scss +++ b/source/_patterns/01-elements/headline/_headline.variables.scss @@ -1,14 +1,26 @@ -@import "../../../css/helpers/functions"; +@import '../../../css/helpers/functions'; $rea-main-h1-font-size: to-rem( $pxValue: 36 ) !default; // * TODO: possibly rework variable naming +$rea-main-h1-font-size-small: to-rem( + $pxValue: 28 +) !default; // * TODO: possibly rework variable naming $rea-main-h2-font-size: to-rem( $pxValue: 24 ) !default; // * TODO: possibly rework variable naming +$rea-main-h2-font-size-small: to-rem( + $pxValue: 20 +) !default; // * TODO: possibly rework variable naming $rea-main-h3-font-size: to-rem( $pxValue: 20 ) !default; // * TODO: possibly rework variable naming +$rea-main-h3-font-size-small: to-rem( + $pxValue: 18 +) !default; // * TODO: possibly rework variable naming $rea-main-h4-font-size: to-rem( $pxValue: 18 ) !default; // * TODO: possibly rework variable naming +$rea-main-h4-font-size-small: to-rem( + $pxValue: 16 +) !default; // * TODO: possibly rework variable naming diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 22be7f0302..8e3e250ba8 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -25,18 +25,30 @@ h1 { &.elm-headline { font-size: $rea-main-h1-font-size; // * TODO: possibly rework variable naming line-height: 1.11em; + @media screen and (max-width: 767px) { + font-size: $rea-main-h1-font-size-small; // * TODO: possibly rework variable naming + line-height: 1.14; + } } } h2 { &.elm-headline { font-size: $rea-main-h2-font-size; // * TODO: possibly rework variable naming line-height: 1.17em; + @media screen and (max-width: 767px) { + font-size: $rea-main-h2-font-size-small; // * TODO: possibly rework variable naming + line-height: 1.2; + } } } h3 { &.elm-headline { font-size: $rea-main-h3-font-size; // * TODO: possibly rework variable naming line-height: 1.2em; + @media screen and (max-width: 767px) { + font-size: $rea-main-h3-font-size-small; // * TODO: possibly rework variable naming + line-height: 1.33; + } } } h4 { @@ -44,5 +56,9 @@ h4 { font-weight: 400; font-size: $rea-main-h4-font-size; // * TODO: possibly rework variable naming line-height: 1.33; + @media screen and (max-width: 767px) { + font-size: $rea-main-h4-font-size-small; // * TODO: possibly rework variable naming + line-height: 1.25; + } } } From 3a80f80ee07d5aaf42eba8e4bb1e88d402856ea1 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 26 Sep 2022 14:29:34 +0200 Subject: [PATCH 03/10] refactor: corrected the font-weight value for headlines --- .../00-base/type/_fonts.variables.scss | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/source/_patterns/00-base/type/_fonts.variables.scss b/source/_patterns/00-base/type/_fonts.variables.scss index 48ea3b4cb6..3042f82ec6 100644 --- a/source/_patterns/00-base/type/_fonts.variables.scss +++ b/source/_patterns/00-base/type/_fonts.variables.scss @@ -1,21 +1,21 @@ // Font files // font weights according to https://developer.mozilla.org/de/docs/Web/CSS/font-weight $font-families: ( - "DB Screen Head Light": ( - "font-family": "DB Screen Head", - "font-filename": "dbscreenhead-light", + 'DB Screen Head Light': ( + 'font-family': 'DB Screen Head', + 'font-filename': 'dbscreenhead-light', // light font weight - "font-weight": 300, - "font-style": normal, - "font-local": true + 'font-weight': 300, + 'font-style': normal, + 'font-local': true ), - "DB Screen Head Black": ( - "font-family": "DB Screen Head", - "font-filename": "dbscreenhead-black", + 'DB Screen Head Black': ( + 'font-family': 'DB Screen Head', + 'font-filename': 'dbscreenhead-black', // black/"bold" font weight - "font-weight": 700, - "font-style": normal, - "font-local": true + 'font-weight': 900, + 'font-style': normal, + 'font-local': true ), // "DB Screen Sans Digital Regular": ( // "font-family": "DB Screen Sans Digital Regular", @@ -24,20 +24,20 @@ $font-families: ( // "font-weight": 400, // "font-style": normal // ), - "DB Screen Sans Regular": + 'DB Screen Sans Regular': ( - "font-family": "DB Screen Sans", - "font-filename": "dbscreensans-regular", + 'font-family': 'DB Screen Sans', + 'font-filename': 'dbscreensans-regular', // normal font weight - "font-weight": 400, - "font-style": normal, - "font-local": true + 'font-weight': 400, + 'font-style': normal, + 'font-local': true ), - "DB Screen Sans Bold": ( - "font-family": "DB Screen Sans", - "font-filename": "dbscreensans-bold", + 'DB Screen Sans Bold': ( + 'font-family': 'DB Screen Sans', + 'font-filename': 'dbscreensans-bold', // bold font weight - "font-weight": 700, - "font-style": normal + 'font-weight': 700, + 'font-style': normal ) ) !default; From 93b3abdf170343e2ddae3e990e57024acf011f61 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 26 Sep 2022 15:11:49 +0200 Subject: [PATCH 04/10] refactor: quotes --- .../00-base/type/_fonts.variables.scss | 46 +++++++++---------- .../headline/_headline.variables.scss | 2 +- .../01-elements/headline/headline.scss | 2 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/source/_patterns/00-base/type/_fonts.variables.scss b/source/_patterns/00-base/type/_fonts.variables.scss index 3042f82ec6..18d2417607 100644 --- a/source/_patterns/00-base/type/_fonts.variables.scss +++ b/source/_patterns/00-base/type/_fonts.variables.scss @@ -1,21 +1,21 @@ // Font files // font weights according to https://developer.mozilla.org/de/docs/Web/CSS/font-weight $font-families: ( - 'DB Screen Head Light': ( - 'font-family': 'DB Screen Head', - 'font-filename': 'dbscreenhead-light', + "DB Screen Head Light": ( + "font-family": "DB Screen Head", + "font-filename": "dbscreenhead-light", // light font weight - 'font-weight': 300, - 'font-style': normal, - 'font-local': true + "font-weight": 300, + "font-style": normal, + "font-local": true ), - 'DB Screen Head Black': ( - 'font-family': 'DB Screen Head', - 'font-filename': 'dbscreenhead-black', + "DB Screen Head Black": ( + "font-family": "DB Screen Head", + "font-filename": "dbscreenhead-black", // black/"bold" font weight - 'font-weight': 900, - 'font-style': normal, - 'font-local': true + "font-weight": 900, + "font-style": normal, + "font-local": true ), // "DB Screen Sans Digital Regular": ( // "font-family": "DB Screen Sans Digital Regular", @@ -24,20 +24,20 @@ $font-families: ( // "font-weight": 400, // "font-style": normal // ), - 'DB Screen Sans Regular': + "DB Screen Sans Regular": ( - 'font-family': 'DB Screen Sans', - 'font-filename': 'dbscreensans-regular', + "font-family": "DB Screen Sans", + "font-filename": "dbscreensans-regular", // normal font weight - 'font-weight': 400, - 'font-style': normal, - 'font-local': true + "font-weight": 400, + "font-style": normal, + "font-local": true ), - 'DB Screen Sans Bold': ( - 'font-family': 'DB Screen Sans', - 'font-filename': 'dbscreensans-bold', + "DB Screen Sans Bold": ( + "font-family": "DB Screen Sans", + "font-filename": "dbscreensans-bold", // bold font weight - 'font-weight': 700, - 'font-style': normal + "font-weight": 700, + "font-style": normal ) ) !default; diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss index ef08d0d7c5..16645fe6f1 100644 --- a/source/_patterns/01-elements/headline/_headline.variables.scss +++ b/source/_patterns/01-elements/headline/_headline.variables.scss @@ -1,4 +1,4 @@ -@import '../../../css/helpers/functions'; +@import "../../../css/helpers/functions"; $rea-main-h1-font-size: to-rem( $pxValue: 36 diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 8e3e250ba8..7b704333cb 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -1,4 +1,4 @@ -@import 'headline.variables'; +@import "headline.variables"; h1, h2, From aee2d8bcef78a2560055d0bbe858f8d35423f1ae Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Sun, 2 Oct 2022 09:25:39 +0200 Subject: [PATCH 05/10] chore: some optimization --- source/_patterns/01-elements/headline/headline.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 7b704333cb..1bcf8b51f5 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -1,12 +1,5 @@ @import "headline.variables"; -h1, -h2, -h3 { - &.elm-headline { - font-family: $db-font-family-headline; - } -} .elm-headline { margin-bottom: to-rem($pxValue: 16); @@ -18,6 +11,7 @@ h1, h2, h3 { &.elm-headline { + font-family: $db-font-family-headline; font-weight: 900; } } From f53798767a248305d909c06fbf375f6f747ada6b Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Sun, 2 Oct 2022 09:29:54 +0200 Subject: [PATCH 06/10] chore: switch to unitless declarations --- source/_patterns/01-elements/headline/headline.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 1bcf8b51f5..12f774d15d 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -18,7 +18,7 @@ h3 { h1 { &.elm-headline { font-size: $rea-main-h1-font-size; // * TODO: possibly rework variable naming - line-height: 1.11em; + line-height: 1.11; @media screen and (max-width: 767px) { font-size: $rea-main-h1-font-size-small; // * TODO: possibly rework variable naming line-height: 1.14; @@ -28,7 +28,7 @@ h1 { h2 { &.elm-headline { font-size: $rea-main-h2-font-size; // * TODO: possibly rework variable naming - line-height: 1.17em; + line-height: 1.17; @media screen and (max-width: 767px) { font-size: $rea-main-h2-font-size-small; // * TODO: possibly rework variable naming line-height: 1.2; @@ -38,7 +38,7 @@ h2 { h3 { &.elm-headline { font-size: $rea-main-h3-font-size; // * TODO: possibly rework variable naming - line-height: 1.2em; + line-height: 1.2; @media screen and (max-width: 767px) { font-size: $rea-main-h3-font-size-small; // * TODO: possibly rework variable naming line-height: 1.33; From 88e7a555ed2789c0b40474d0700da01004199022 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Sun, 2 Oct 2022 09:38:15 +0200 Subject: [PATCH 07/10] refactor: calculate the headlines line-height --- .../headline/_headline.variables.scss | 32 ++++----------- .../01-elements/headline/headline.scss | 40 +++++++++++++------ 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss index 16645fe6f1..a4b4433d7c 100644 --- a/source/_patterns/01-elements/headline/_headline.variables.scss +++ b/source/_patterns/01-elements/headline/_headline.variables.scss @@ -1,26 +1,10 @@ @import "../../../css/helpers/functions"; -$rea-main-h1-font-size: to-rem( - $pxValue: 36 -) !default; // * TODO: possibly rework variable naming -$rea-main-h1-font-size-small: to-rem( - $pxValue: 28 -) !default; // * TODO: possibly rework variable naming -$rea-main-h2-font-size: to-rem( - $pxValue: 24 -) !default; // * TODO: possibly rework variable naming -$rea-main-h2-font-size-small: to-rem( - $pxValue: 20 -) !default; // * TODO: possibly rework variable naming -$rea-main-h3-font-size: to-rem( - $pxValue: 20 -) !default; // * TODO: possibly rework variable naming -$rea-main-h3-font-size-small: to-rem( - $pxValue: 18 -) !default; // * TODO: possibly rework variable naming -$rea-main-h4-font-size: to-rem( - $pxValue: 18 -) !default; // * TODO: possibly rework variable naming -$rea-main-h4-font-size-small: to-rem( - $pxValue: 16 -) !default; // * TODO: possibly rework variable naming +$rea-main-h1-font-size: 36 !default; // * TODO: possibly rework variable naming +$rea-main-h1-font-size-small: 28 !default; // * TODO: possibly rework variable naming +$rea-main-h2-font-size: 24 !default; // * TODO: possibly rework variable naming +$rea-main-h2-font-size-small: 20 !default; // * TODO: possibly rework variable naming +$rea-main-h3-font-size: 20 !default; // * TODO: possibly rework variable naming +$rea-main-h3-font-size-small: 18 !default; // * TODO: possibly rework variable naming +$rea-main-h4-font-size: 18 !default; // * TODO: possibly rework variable naming +$rea-main-h4-font-size-small: 16 !default; // * TODO: possibly rework variable naming diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 12f774d15d..9ce85efeee 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -17,30 +17,42 @@ h3 { } h1 { &.elm-headline { - font-size: $rea-main-h1-font-size; // * TODO: possibly rework variable naming - line-height: 1.11; + font-size: to-rem( + $pxValue: $rea-main-h1-font-size + ); // * TODO: possibly rework variable naming + line-height: 40 / $rea-main-h1-font-size; @media screen and (max-width: 767px) { - font-size: $rea-main-h1-font-size-small; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h1-font-size-small + ); // * TODO: possibly rework variable naming line-height: 1.14; } } } h2 { &.elm-headline { - font-size: $rea-main-h2-font-size; // * TODO: possibly rework variable naming - line-height: 1.17; + font-size: to-rem( + $pxValue: $rea-main-h2-font-size + ); // * TODO: possibly rework variable naming + line-height: 28 / $rea-main-h2-font-size; @media screen and (max-width: 767px) { - font-size: $rea-main-h2-font-size-small; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h2-font-size-small + ); // * TODO: possibly rework variable naming line-height: 1.2; } } } h3 { &.elm-headline { - font-size: $rea-main-h3-font-size; // * TODO: possibly rework variable naming - line-height: 1.2; + font-size: to-rem( + $pxValue: $rea-main-h3-font-size + ); // * TODO: possibly rework variable naming + line-height: 24 / $rea-main-h3-font-size; @media screen and (max-width: 767px) { - font-size: $rea-main-h3-font-size-small; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h3-font-size-small + ); // * TODO: possibly rework variable naming line-height: 1.33; } } @@ -48,10 +60,14 @@ h3 { h4 { &.elm-headline { font-weight: 400; - font-size: $rea-main-h4-font-size; // * TODO: possibly rework variable naming - line-height: 1.33; + font-size: to-rem( + $pxValue: $rea-main-h4-font-size + ); // * TODO: possibly rework variable naming + line-height: 24 / $rea-main-h4-font-size; @media screen and (max-width: 767px) { - font-size: $rea-main-h4-font-size-small; // * TODO: possibly rework variable naming + font-size: to-rem( + $pxValue: $rea-main-h4-font-size-small + ); // * TODO: possibly rework variable naming line-height: 1.25; } } From 900b0cbc255794131a408025c7268576cae813d4 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Sun, 2 Oct 2022 09:38:45 +0200 Subject: [PATCH 08/10] chore: simplification --- .../headline/_headline.variables.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss index a4b4433d7c..a6b9a8ff6e 100644 --- a/source/_patterns/01-elements/headline/_headline.variables.scss +++ b/source/_patterns/01-elements/headline/_headline.variables.scss @@ -1,10 +1,11 @@ @import "../../../css/helpers/functions"; -$rea-main-h1-font-size: 36 !default; // * TODO: possibly rework variable naming -$rea-main-h1-font-size-small: 28 !default; // * TODO: possibly rework variable naming -$rea-main-h2-font-size: 24 !default; // * TODO: possibly rework variable naming -$rea-main-h2-font-size-small: 20 !default; // * TODO: possibly rework variable naming -$rea-main-h3-font-size: 20 !default; // * TODO: possibly rework variable naming -$rea-main-h3-font-size-small: 18 !default; // * TODO: possibly rework variable naming -$rea-main-h4-font-size: 18 !default; // * TODO: possibly rework variable naming -$rea-main-h4-font-size-small: 16 !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; From 8a8bd7c8cf72b0e037d24e1db76bf4257dc50f0d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Sun, 2 Oct 2022 11:46:36 +0200 Subject: [PATCH 09/10] chore: satisfy the sass compiler --- source/_patterns/01-elements/headline/headline.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 9ce85efeee..979665f5e9 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -1,3 +1,4 @@ +@use "sass:math"; @import "headline.variables"; .elm-headline { @@ -20,7 +21,7 @@ h1 { font-size: to-rem( $pxValue: $rea-main-h1-font-size ); // * TODO: possibly rework variable naming - line-height: 40 / $rea-main-h1-font-size; + 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 @@ -34,7 +35,7 @@ h2 { font-size: to-rem( $pxValue: $rea-main-h2-font-size ); // * TODO: possibly rework variable naming - line-height: 28 / $rea-main-h2-font-size; + 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 @@ -48,7 +49,7 @@ h3 { font-size: to-rem( $pxValue: $rea-main-h3-font-size ); // * TODO: possibly rework variable naming - line-height: 24 / $rea-main-h3-font-size; + 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 @@ -63,7 +64,7 @@ h4 { font-size: to-rem( $pxValue: $rea-main-h4-font-size ); // * TODO: possibly rework variable naming - line-height: 24 / $rea-main-h4-font-size; + 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 From c007c4292823cc863238549f3f3fb63839446e41 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 17 Oct 2022 06:17:49 +0200 Subject: [PATCH 10/10] chore: stylelint fix --- source/_patterns/01-elements/headline/headline.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss index 476a4f3b66..2ceca259b2 100644 --- a/source/_patterns/01-elements/headline/headline.scss +++ b/source/_patterns/01-elements/headline/headline.scss @@ -61,12 +61,13 @@ h3 { } } } + h4 { &.elm-headline { - font-weight: 400; 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(