diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/objects/_heading.scss | 29 | ||||
| -rw-r--r-- | src/scopes/_headings.scss | 29 |
2 files changed, 36 insertions, 22 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 6264072..56d4987 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
| @@ -27,17 +27,17 @@ | |||
| 27 | 27 | ||
| 28 | @include iro.bem-modifier('xxl') { | 28 | @include iro.bem-modifier('xxl') { |
| 29 | color: fn.color(--strong); | 29 | color: fn.color(--strong); |
| 30 | font-size: fn.global-dim(--font-size --900); | 30 | font-size: fn.global-dim(--font-size --400); |
| 31 | } | 31 | } |
| 32 | 32 | ||
| 33 | @include iro.bem-modifier('xl') { | 33 | @include iro.bem-modifier('xl') { |
| 34 | color: fn.color(--strong); | 34 | color: fn.color(--strong); |
| 35 | font-size: fn.global-dim(--font-size --600); | 35 | font-size: fn.global-dim(--font-size --300); |
| 36 | } | 36 | } |
| 37 | 37 | ||
| 38 | @include iro.bem-modifier('lg') { | 38 | @include iro.bem-modifier('lg') { |
| 39 | color: fn.color(--strong); | 39 | color: fn.color(--strong); |
| 40 | font-size: fn.global-dim(--font-size --300); | 40 | font-size: fn.global-dim(--font-size --200); |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | @include iro.bem-modifier('md') { | 43 | @include iro.bem-modifier('md') { |
| @@ -71,14 +71,21 @@ | |||
| 71 | color: fn.color(--light); | 71 | color: fn.color(--light); |
| 72 | } | 72 | } |
| 73 | 73 | ||
| 74 | @include iro.bem-elem('primary') { | 74 | @include iro.bem-modifier('display') { |
| 75 | background-image: linear-gradient( | 75 | @include iro.bem-modifier('xxl') { |
| 76 | to top, | 76 | color: fn.foreign-color(--heading, --strong); |
| 77 | transparent .15em, | 77 | font-size: fn.global-dim(--font-size --900); |
| 78 | fn.color(--bg) .15em, | 78 | } |
| 79 | fn.color(--bg) .6em, | 79 | |
| 80 | transparent .6em | 80 | @include iro.bem-modifier('xl') { |
| 81 | ); | 81 | color: fn.foreign-color(--heading, --strong); |
| 82 | font-size: fn.global-dim(--font-size --600); | ||
| 83 | } | ||
| 84 | |||
| 85 | @include iro.bem-modifier('l') { | ||
| 86 | color: fn.foreign-color(--heading, --strong); | ||
| 87 | font-size: fn.global-dim(--font-size --300); | ||
| 88 | } | ||
| 82 | } | 89 | } |
| 83 | } | 90 | } |
| 84 | } | 91 | } |
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 58bac7f..fc4991a 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
| @@ -21,17 +21,17 @@ | |||
| 21 | 21 | ||
| 22 | h1 { | 22 | h1 { |
| 23 | color: fn.foreign-color(--heading, --strong); | 23 | color: fn.foreign-color(--heading, --strong); |
| 24 | font-size: fn.global-dim(--font-size --900); | 24 | font-size: fn.global-dim(--font-size --400); |
| 25 | } | 25 | } |
| 26 | 26 | ||
| 27 | h2 { | 27 | h2 { |
| 28 | color: fn.foreign-color(--heading, --strong); | 28 | color: fn.foreign-color(--heading, --strong); |
| 29 | font-size: fn.global-dim(--font-size --600); | 29 | font-size: fn.global-dim(--font-size --300); |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | h3 { | 32 | h3 { |
| 33 | color: fn.foreign-color(--heading, --strong); | 33 | color: fn.foreign-color(--heading, --strong); |
| 34 | font-size: fn.global-dim(--font-size --300); | 34 | font-size: fn.global-dim(--font-size --200); |
| 35 | } | 35 | } |
| 36 | 36 | ||
| 37 | h4 { | 37 | h4 { |
| @@ -65,14 +65,21 @@ | |||
| 65 | color: fn.foreign-color(--heading, --light); | 65 | color: fn.foreign-color(--heading, --light); |
| 66 | } | 66 | } |
| 67 | 67 | ||
| 68 | @include iro.bem-elem('primary') { | 68 | @include iro.bem-modifier('display') { |
| 69 | background-image: linear-gradient( | 69 | h1 { |
| 70 | to top, | 70 | color: fn.foreign-color(--heading, --strong); |
| 71 | transparent .15em, | 71 | font-size: fn.global-dim(--font-size --900); |
| 72 | fn.foreign-color(--heading, --bg) .15em, | 72 | } |
| 73 | fn.foreign-color(--heading, --bg) .6em, | 73 | |
| 74 | transparent .6em | 74 | h2 { |
| 75 | ); | 75 | color: fn.foreign-color(--heading, --strong); |
| 76 | font-size: fn.global-dim(--font-size --600); | ||
| 77 | } | ||
| 78 | |||
| 79 | h3 { | ||
| 80 | color: fn.foreign-color(--heading, --strong); | ||
| 81 | font-size: fn.global-dim(--font-size --300); | ||
| 82 | } | ||
| 76 | } | 83 | } |
| 77 | } | 84 | } |
| 78 | } | 85 | } |