From d01fbe45ff32a6186a197f03693af346eb629ff1 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 18 Dec 2023 14:52:50 +0100 Subject: Typography --- src/scopes/_headings.scss | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'src/scopes/_headings.scss') 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 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; @use '../mixins' as mx; +@use 'include-media/dist/include-media' as media; @include iro.props-namespace('headings') { @include iro.bem-scope(iro.props-namespace()) { @@ -56,26 +57,50 @@ h1 { @include mx.heading-strong(--display --xxl); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --xxl); + } } h2 { @include mx.heading-strong(--display --xl); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --xl); + } } h3 { @include mx.heading-strong(--display --lg); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --lg); + } } h4 { @include mx.heading-strong(--display --md); + + @include media.media('<=md') { + @include mx.heading-strong(--display-sm --md); + } } h5 { @include mx.heading-medium(--display --sm); + + @include media.media('<=md') { + @include mx.heading-medium(--display-sm --sm); + } } h6 { @include mx.heading-faint(--display --xs); + + @include media.media('<=md') { + @include mx.heading-faint(--display-sm --xs); + } } } } -- cgit v1.2.3-70-g09d2