From a6d3fbcfe90103ac3000d98cc97879d1c5c00915 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 10 Jun 2022 22:04:37 +0200 Subject: Updated headings --- src/scopes/_headings.scss | 75 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/scopes/_headings.scss (limited to 'src/scopes/_headings.scss') diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss new file mode 100644 index 0000000..b1ef537 --- /dev/null +++ b/src/scopes/_headings.scss @@ -0,0 +1,75 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; + +@include iro.props-namespace('headings') { + @include iro.bem-scope(iro.props-namespace()) { + h1, + h2, + h3, + h4, + h5, + h6 { + @include mx.set-font(--headline); + + display: block; + letter-spacing: normal; + text-transform: none; + } + + + h1 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --1000); + } + + h2 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --700); + } + + h3 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --400); + } + + h4 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --200); + } + + h5 { + @include mx.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --100), + --weight: bold, + --transform: uppercase, + --spacing: 1px + )); + + color: fn.foreign-color(--heading, --strong); + } + + h6 { + @include mx.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --50), + --weight: 500, + --transform: uppercase, + --spacing: 1px + )); + + color: fn.foreign-color(--heading, --light); + } + + @include iro.bem-elem('primary') { + background-image: linear-gradient( + to top, + transparent .15em, + fn.foreign-color(--heading, --bg) .15em, + fn.foreign-color(--heading, --bg) .6em, + transparent .6em + ); + } + } +} -- cgit v1.2.3-70-g09d2