From c93948dbc7790d1c36a7e36df4e5485ca249cc37 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 10 Jun 2022 21:13:39 +0200 Subject: Added code and blockquote styles, better headings, various other updates --- src/objects/_alert.scss | 8 ++++---- src/objects/_heading.scss | 37 ++++++++++++++++++++++++++----------- 2 files changed, 30 insertions(+), 15 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index 3b4656e..59efc26 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -4,10 +4,10 @@ @include iro.props-namespace('alert') { @include iro.props-store(( --dims: ( - --border: 2px, - --pad-x: fn.global-dim(--size --250), - --pad-y: fn.global-dim(--size --250), - --rounding: 4px, + --border: 2px, + --pad-x: fn.global-dim(--size --250), + --pad-y: fn.global-dim(--size --200), + --rounding: 4px, ), ), 'dims'); 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 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; @use '../mixins' as mx; +@use '../config'; @include iro.props-namespace('heading') { @include iro.props-store(( --dims: ( - --in-page-margin: ( + --spacing: ( --top: fn.global-dim(--size --500), --top-sibling: fn.global-dim(--size --325), - --bottom: fn.global-dim(--size --150), ), ), ), 'dims'); @@ -17,48 +17,53 @@ --colors: ( --light: fn.global-color(--fg-hi), --strong: fn.global-color(--fg-lo), + --bg: fn.global-color(--bg-hi), ), ), 'colors'); @include iro.bem-object(iro.props-namespace()) { @include mx.set-font(--headline); - display: block; + display: block; + letter-spacing: normal; + text-transform: none; @include iro.bem-at-theme('typography') { - margin-top: fn.dim(--in-page-margin --top); + margin-top: fn.dim(--spacing --top); margin-bottom: 0; & + & { - margin-top: fn.dim(--in-page-margin --top-sibling); + margin-top: fn.dim(--spacing --top-sibling); } } @include iro.bem-modifier('xxl') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --400); + font-size: fn.global-dim(--font-size --1000); } @include iro.bem-modifier('xl') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --300); + font-size: fn.global-dim(--font-size --700); } @include iro.bem-modifier('lg') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --200); + font-size: fn.global-dim(--font-size --400); } @include iro.bem-modifier('md') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --150); + font-size: fn.global-dim(--font-size --200); } @include iro.bem-modifier('sm') { @include mx.set-font(--standard, ( --line-height: null, --size: fn.global-dim(--font-size --100), - --weight: 700 + --weight: bold, + --transform: uppercase, + --spacing: 1px )); color: fn.color(--strong); @@ -70,10 +75,20 @@ --size: fn.global-dim(--font-size --50), --weight: 500, --transform: uppercase, - --spacing: .5px + --spacing: 1px )); color: fn.color(--light); } + + @include iro.bem-elem('inner') { + background-image: linear-gradient( + to top, + transparent .15em, + fn.color(--bg) .15em, + fn.color(--bg) .6em, + transparent .6em + ); + } } } -- cgit v1.2.3-70-g09d2