summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-12 17:46:05 +0100
committerVolpeon <git@volpeon.ink>2023-01-12 17:46:05 +0100
commit1a44092232713ef2063815bb03aadbb543e88ff6 (patch)
tree1c6fd540a808ed6054579202c8db246b855d6347 /src/scopes
parentUpdate (diff)
downloadiro-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.scss73
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 }