summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_heading.scss')
-rw-r--r--src/objects/_heading.scss37
1 files changed, 26 insertions, 11 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 3c14c99..77e24b4 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,14 +1,14 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../mixins' as mx; 3@use '../mixins' as mx;
4@use '../config';
4 5
5@include iro.props-namespace('heading') { 6@include iro.props-namespace('heading') {
6 @include iro.props-store(( 7 @include iro.props-store((
7 --dims: ( 8 --dims: (
8 --in-page-margin: ( 9 --spacing: (
9 --top: fn.global-dim(--size --500), 10 --top: fn.global-dim(--size --500),
10 --top-sibling: fn.global-dim(--size --325), 11 --top-sibling: fn.global-dim(--size --325),
11 --bottom: fn.global-dim(--size --150),
12 ), 12 ),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
@@ -17,48 +17,53 @@
17 --colors: ( 17 --colors: (
18 --light: fn.global-color(--fg-hi), 18 --light: fn.global-color(--fg-hi),
19 --strong: fn.global-color(--fg-lo), 19 --strong: fn.global-color(--fg-lo),
20 --bg: fn.global-color(--bg-hi),
20 ), 21 ),
21 ), 'colors'); 22 ), 'colors');
22 23
23 @include iro.bem-object(iro.props-namespace()) { 24 @include iro.bem-object(iro.props-namespace()) {
24 @include mx.set-font(--headline); 25 @include mx.set-font(--headline);
25 26
26 display: block; 27 display: block;
28 letter-spacing: normal;
29 text-transform: none;
27 30
28 @include iro.bem-at-theme('typography') { 31 @include iro.bem-at-theme('typography') {
29 margin-top: fn.dim(--in-page-margin --top); 32 margin-top: fn.dim(--spacing --top);
30 margin-bottom: 0; 33 margin-bottom: 0;
31 34
32 & + & { 35 & + & {
33 margin-top: fn.dim(--in-page-margin --top-sibling); 36 margin-top: fn.dim(--spacing --top-sibling);
34 } 37 }
35 } 38 }
36 39
37 @include iro.bem-modifier('xxl') { 40 @include iro.bem-modifier('xxl') {
38 color: fn.color(--strong); 41 color: fn.color(--strong);
39 font-size: fn.global-dim(--font-size --400); 42 font-size: fn.global-dim(--font-size --1000);
40 } 43 }
41 44
42 @include iro.bem-modifier('xl') { 45 @include iro.bem-modifier('xl') {
43 color: fn.color(--strong); 46 color: fn.color(--strong);
44 font-size: fn.global-dim(--font-size --300); 47 font-size: fn.global-dim(--font-size --700);
45 } 48 }
46 49
47 @include iro.bem-modifier('lg') { 50 @include iro.bem-modifier('lg') {
48 color: fn.color(--strong); 51 color: fn.color(--strong);
49 font-size: fn.global-dim(--font-size --200); 52 font-size: fn.global-dim(--font-size --400);
50 } 53 }
51 54
52 @include iro.bem-modifier('md') { 55 @include iro.bem-modifier('md') {
53 color: fn.color(--strong); 56 color: fn.color(--strong);
54 font-size: fn.global-dim(--font-size --150); 57 font-size: fn.global-dim(--font-size --200);
55 } 58 }
56 59
57 @include iro.bem-modifier('sm') { 60 @include iro.bem-modifier('sm') {
58 @include mx.set-font(--standard, ( 61 @include mx.set-font(--standard, (
59 --line-height: null, 62 --line-height: null,
60 --size: fn.global-dim(--font-size --100), 63 --size: fn.global-dim(--font-size --100),
61 --weight: 700 64 --weight: bold,
65 --transform: uppercase,
66 --spacing: 1px
62 )); 67 ));
63 68
64 color: fn.color(--strong); 69 color: fn.color(--strong);
@@ -70,10 +75,20 @@
70 --size: fn.global-dim(--font-size --50), 75 --size: fn.global-dim(--font-size --50),
71 --weight: 500, 76 --weight: 500,
72 --transform: uppercase, 77 --transform: uppercase,
73 --spacing: .5px 78 --spacing: 1px
74 )); 79 ));
75 80
76 color: fn.color(--light); 81 color: fn.color(--light);
77 } 82 }
83
84 @include iro.bem-elem('inner') {
85 background-image: linear-gradient(
86 to top,
87 transparent .15em,
88 fn.color(--bg) .15em,
89 fn.color(--bg) .6em,
90 transparent .6em
91 );
92 }
78 } 93 }
79} 94}