summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-12-18 14:52:50 +0100
committerVolpeon <git@volpeon.ink>2023-12-18 14:52:50 +0100
commitd01fbe45ff32a6186a197f03693af346eb629ff1 (patch)
treec99b8f48a06c1cf39d22b018875236a665ec6cec /src/scopes
parentBetter heading mixin (diff)
downloadiro-design-d01fbe45ff32a6186a197f03693af346eb629ff1.tar.gz
iro-design-d01fbe45ff32a6186a197f03693af346eb629ff1.tar.bz2
iro-design-d01fbe45ff32a6186a197f03693af346eb629ff1.zip
Typography
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_headings.scss25
1 files changed, 25 insertions, 0 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c241557..c5033e8 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,6 +1,7 @@
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 'include-media/dist/include-media' as media;
4 5
5@include iro.props-namespace('headings') { 6@include iro.props-namespace('headings') {
6 @include iro.bem-scope(iro.props-namespace()) { 7 @include iro.bem-scope(iro.props-namespace()) {
@@ -56,26 +57,50 @@
56 57
57 h1 { 58 h1 {
58 @include mx.heading-strong(--display --xxl); 59 @include mx.heading-strong(--display --xxl);
60
61 @include media.media('<=md') {
62 @include mx.heading-strong(--display-sm --xxl);
63 }
59 } 64 }
60 65
61 h2 { 66 h2 {
62 @include mx.heading-strong(--display --xl); 67 @include mx.heading-strong(--display --xl);
68
69 @include media.media('<=md') {
70 @include mx.heading-strong(--display-sm --xl);
71 }
63 } 72 }
64 73
65 h3 { 74 h3 {
66 @include mx.heading-strong(--display --lg); 75 @include mx.heading-strong(--display --lg);
76
77 @include media.media('<=md') {
78 @include mx.heading-strong(--display-sm --lg);
79 }
67 } 80 }
68 81
69 h4 { 82 h4 {
70 @include mx.heading-strong(--display --md); 83 @include mx.heading-strong(--display --md);
84
85 @include media.media('<=md') {
86 @include mx.heading-strong(--display-sm --md);
87 }
71 } 88 }
72 89
73 h5 { 90 h5 {
74 @include mx.heading-medium(--display --sm); 91 @include mx.heading-medium(--display --sm);
92
93 @include media.media('<=md') {
94 @include mx.heading-medium(--display-sm --sm);
95 }
75 } 96 }
76 97
77 h6 { 98 h6 {
78 @include mx.heading-faint(--display --xs); 99 @include mx.heading-faint(--display --xs);
100
101 @include media.media('<=md') {
102 @include mx.heading-faint(--display-sm --xs);
103 }
79 } 104 }
80 } 105 }
81 } 106 }