Skip to content

refactor: headlines (Guidelines 2.0) #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Oct 17, 2022
Merged

refactor: headlines (Guidelines 2.0) #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
80b60f6
refactor(headlines): font-weight & line-height declarations and order
mfranzke Sep 26, 2022
33b560b
feat(headlines): added responsive sizes
mfranzke Sep 26, 2022
3a80f80
refactor: corrected the font-weight value for headlines
mfranzke Sep 26, 2022
f4de800
Merge branch 'main' into refactor-headlines
mfranzke Sep 26, 2022
93b3abd
refactor: quotes
mfranzke Sep 26, 2022
ddd68de
Merge branch 'main' into refactor-headlines
mfranzke Sep 28, 2022
2354220
Merge branch 'main' into refactor-headlines
mfranzke Sep 28, 2022
aee2d8b
chore: some optimization
mfranzke Oct 2, 2022
f537987
chore: switch to unitless declarations
mfranzke Oct 2, 2022
88e7a55
refactor: calculate the headlines line-height
mfranzke Oct 2, 2022
900b0cb
chore: simplification
mfranzke Oct 2, 2022
8a8bd7c
chore: satisfy the sass compiler
mfranzke Oct 2, 2022
129d153
Merge branch 'main' into refactor-headlines
mfranzke Oct 11, 2022
d544c02
Merge branch 'main' into refactor-headlines
mfranzke Oct 11, 2022
74ebac1
Merge branch 'main' into refactor-headlines
mfranzke Oct 11, 2022
6ff8c2f
Merge branch 'main' into refactor-headlines
mfranzke Oct 14, 2022
c007c42
chore: stylelint fix
mfranzke Oct 17, 2022
32f961b
Merge branch 'main' into refactor-headlines
mfranzke Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion source/_patterns/00-base/type/_fonts.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
),
Expand Down
21 changes: 9 additions & 12 deletions source/_patterns/01-elements/headline/_headline.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
66 changes: 48 additions & 18 deletions source/_patterns/01-elements/headline/headline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Expand All @@ -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;
}
}
}