diff options
| author | Volpeon <git@volpeon.ink> | 2023-01-12 17:46:05 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2023-01-12 17:46:05 +0100 |
| commit | 1a44092232713ef2063815bb03aadbb543e88ff6 (patch) | |
| tree | 1c6fd540a808ed6054579202c8db246b855d6347 /src/scopes | |
| parent | Update (diff) | |
| download | iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.tar.gz iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.tar.bz2 iro-design-1a44092232713ef2063815bb03aadbb543e88ff6.zip | |
Improved heading structure
Diffstat (limited to 'src/scopes')
| -rw-r--r-- | src/scopes/_headings.scss | 73 |
1 files changed, 30 insertions, 43 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index fc4991a..5b05b45 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
| @@ -20,65 +20,52 @@ | |||
| 20 | 20 | ||
| 21 | 21 | ||
| 22 | h1 { | 22 | h1 { |
| 23 | color: fn.foreign-color(--heading, --strong); | 23 | @include mx.heading-strong(fn.global-dim(--heading --lg)); |
| 24 | font-size: fn.global-dim(--font-size --400); | ||
| 25 | } | 24 | } |
| 26 | 25 | ||
| 27 | h2 { | 26 | h2 { |
| 28 | color: fn.foreign-color(--heading, --strong); | 27 | @include mx.heading-medium(fn.global-dim(--heading --md)); |
| 29 | font-size: fn.global-dim(--font-size --300); | ||
| 30 | } | ||
| 31 | |||
| 32 | h3 { | ||
| 33 | color: fn.foreign-color(--heading, --strong); | ||
| 34 | font-size: fn.global-dim(--font-size --200); | ||
| 35 | } | ||
| 36 | |||
| 37 | h4 { | ||
| 38 | color: fn.foreign-color(--heading, --strong); | ||
| 39 | font-size: fn.global-dim(--font-size --150); | ||
| 40 | } | ||
| 41 | |||
| 42 | h5 { | ||
| 43 | @include mx.set-font(--standard, ( | ||
| 44 | --line-height: null, | ||
| 45 | --size: fn.global-dim(--font-size --75), | ||
| 46 | --weight: bold, | ||
| 47 | --transform: uppercase, | ||
| 48 | --spacing: 1px | ||
| 49 | )); | ||
| 50 | |||
| 51 | transform: none; | ||
| 52 | color: fn.foreign-color(--heading, --strong); | ||
| 53 | } | 28 | } |
| 54 | 29 | ||
| 30 | h3, | ||
| 31 | h4, | ||
| 32 | h5, | ||
| 55 | h6 { | 33 | h6 { |
| 56 | @include mx.set-font(--standard, ( | 34 | @include mx.heading-faint(fn.global-dim(--heading --sm)); |
| 57 | --line-height: null, | ||
| 58 | --size: fn.global-dim(--font-size --50), | ||
| 59 | --weight: 500, | ||
| 60 | --transform: uppercase, | ||
| 61 | --spacing: 1px | ||
| 62 | )); | ||
| 63 | |||
| 64 | transform: none; | ||
| 65 | color: fn.foreign-color(--heading, --light); | ||
| 66 | } | 35 | } |
| 67 | 36 | ||
| 68 | @include iro.bem-modifier('display') { | 37 | @include iro.bem-modifier('display') { |
| 38 | h1, | ||
| 39 | h2, | ||
| 40 | h3, | ||
| 41 | h4, | ||
| 42 | h5, | ||
| 43 | h6 { | ||
| 44 | @include mx.set-font(--headline); | ||
| 45 | } | ||
| 46 | |||
| 69 | h1 { | 47 | h1 { |
| 70 | color: fn.foreign-color(--heading, --strong); | 48 | @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); |
| 71 | font-size: fn.global-dim(--font-size --900); | ||
| 72 | } | 49 | } |
| 73 | 50 | ||
| 74 | h2 { | 51 | h2 { |
| 75 | color: fn.foreign-color(--heading, --strong); | 52 | @include mx.heading-strong(fn.global-dim(--heading --display --xl)); |
| 76 | font-size: fn.global-dim(--font-size --600); | ||
| 77 | } | 53 | } |
| 78 | 54 | ||
| 79 | h3 { | 55 | h3 { |
| 80 | color: fn.foreign-color(--heading, --strong); | 56 | @include mx.heading-strong(fn.global-dim(--heading --display --lg)); |
| 81 | font-size: fn.global-dim(--font-size --300); | 57 | } |
| 58 | |||
| 59 | h4 { | ||
| 60 | @include mx.heading-strong(fn.global-dim(--heading --display --md)); | ||
| 61 | } | ||
| 62 | |||
| 63 | h5 { | ||
| 64 | @include mx.heading-medium(fn.global-dim(--heading --display --sm)); | ||
| 65 | } | ||
| 66 | |||
| 67 | h6 { | ||
| 68 | @include mx.heading-faint(fn.global-dim(--heading --display --xs)); | ||
| 82 | } | 69 | } |
| 83 | } | 70 | } |
| 84 | } | 71 | } |