diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-27 22:49:00 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-27 22:49:00 +0200 |
| commit | e1350c621b9c6fd3ec486f1c0a3d5b9691964833 (patch) | |
| tree | e70797f0c34aa4303f32207d0b687f9fb9c318ae /htdocs/src/scss | |
| parent | 667b1d81ca10163e3b079d3f3bdc7ec18a85158c (diff) | |
chore(styles): increase branding font-size and logo size on large vw
Diffstat (limited to 'htdocs/src/scss')
| -rw-r--r-- | htdocs/src/scss/abstracts/_variables.scss | 1 | ||||
| -rw-r--r-- | htdocs/src/scss/base/_fonts.scss | 1 | ||||
| -rw-r--r-- | htdocs/src/scss/layout/_header.scss | 16 |
3 files changed, 14 insertions, 4 deletions
diff --git a/htdocs/src/scss/abstracts/_variables.scss b/htdocs/src/scss/abstracts/_variables.scss index b1f9fd8..a8a22a8 100644 --- a/htdocs/src/scss/abstracts/_variables.scss +++ b/htdocs/src/scss/abstracts/_variables.scss @@ -68,6 +68,7 @@ $font-size_md: $font-size_base-rem * math.pow($font-size_ratio, 0); $font-size_lg: $font-size_base-rem * math.pow($font-size_ratio, 1); $font-size_xl: $font-size_base-rem * math.pow($font-size_ratio, 2); $font-size_2xl: $font-size_base-rem * math.pow($font-size_ratio, 3); +$font-size_3xl: $font-size_base-rem * math.pow($font-size_ratio, 4); //============================================================================ // Spacings diff --git a/htdocs/src/scss/base/_fonts.scss b/htdocs/src/scss/base/_fonts.scss index 9d6c250..192f6b8 100644 --- a/htdocs/src/scss/base/_fonts.scss +++ b/htdocs/src/scss/base/_fonts.scss @@ -109,6 +109,7 @@ font-size-lg: #{var.$font-size_lg}, font-size-xl: #{var.$font-size_xl}, font-size-2xl: #{var.$font-size_2xl}, + font-size-3xl: #{var.$font-size_3xl}, line-height: #{var.$line-height}, ) ); diff --git a/htdocs/src/scss/layout/_header.scss b/htdocs/src/scss/layout/_header.scss index 624afc0..26faf84 100644 --- a/htdocs/src/scss/layout/_header.scss +++ b/htdocs/src/scss/layout/_header.scss @@ -27,7 +27,11 @@ &__title { font-family: fun.get-var(font-family-secondary); - font-size: fun.get-var(font-size-2xl); + font-size: clamp( + #{fun.get-var(font-size-2xl)}, + 5vw, + #{fun.get-var(font-size-3xl)} + ); font-weight: 500; margin: fun.get-var(spacing-xs) 0 fun.get-var(spacing-3xs); } @@ -54,7 +58,11 @@ &__description { font-family: fun.get-var(font-family-secondary); - font-size: fun.get-var(font-size-md); + font-size: clamp( + #{fun.get-var(font-size-md)}, + 3vw, + #{fun.get-var(font-size-lg)} + ); font-weight: 400; letter-spacing: fun.convert-px(1); margin: 0; @@ -85,10 +93,10 @@ &__link { display: block; - height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(85)}); + height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); transform-style: preserve-3d; transition: all 0.6s linear 0s; - width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(85)}); + width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); &:hover, &:focus { |