From a6d3fbcfe90103ac3000d98cc97879d1c5c00915 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 10 Jun 2022 22:04:37 +0200 Subject: Updated headings --- src/_base.scss | 6 +++- src/_declare-vars.scss | 7 +++- src/_scopes.scss | 4 ++- src/objects/_heading.scss | 21 +++-------- src/scopes/_blockquote.scss | 25 -------------- src/scopes/_blockquotes.scss | 25 ++++++++++++++ src/scopes/_headings.scss | 75 ++++++++++++++++++++++++++++++++++++++++ src/scopes/_invisible-links.scss | 15 ++++++++ 8 files changed, 133 insertions(+), 45 deletions(-) delete mode 100644 src/scopes/_blockquote.scss create mode 100644 src/scopes/_blockquotes.scss create mode 100644 src/scopes/_headings.scss create mode 100644 src/scopes/_invisible-links.scss (limited to 'src') diff --git a/src/_base.scss b/src/_base.scss index 365a46e..8cba1fb 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -45,12 +45,16 @@ h3, h4, h5, h6 { - margin: 0; + margin: fn.dim(--heading --margin-top) 0 0; color: fn.color(--fg-lo); font-size: fn.dim(--font-size --100); font-weight: bold; letter-spacing: 1px; text-transform: uppercase; + + & + & { + margin-top: fn.dim(--heading --margin-top-sibling); + } } p { diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index fcd281b..b60374d 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -95,7 +95,12 @@ --focus-outline-width: 3px, --paragraph: ( - --margin-top: fn.dim(--size --150, null), + --margin-top: fn.dim(--size --300, null), + ), + + --heading: ( + --margin-top: fn.dim(--size --500, null), + --margin-top-sibling: fn.dim(--size --325, null), ), --list: ( diff --git a/src/_scopes.scss b/src/_scopes.scss index 92e6d14..28c5399 100644 --- a/src/_scopes.scss +++ b/src/_scopes.scss @@ -1,3 +1,5 @@ @use 'scopes/colored-links'; +@use 'scopes/invisible-links'; @use 'scopes/code'; -@use 'scopes/blockquote'; +@use 'scopes/blockquotes'; +@use 'scopes/headings'; diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 77e24b4..a9e0e71 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -4,15 +4,6 @@ @use '../config'; @include iro.props-namespace('heading') { - @include iro.props-store(( - --dims: ( - --spacing: ( - --top: fn.global-dim(--size --500), - --top-sibling: fn.global-dim(--size --325), - ), - ), - ), 'dims'); - @include iro.props-store(( --colors: ( --light: fn.global-color(--fg-hi), @@ -25,16 +16,12 @@ @include mx.set-font(--headline); display: block; + margin-top: fn.global-dim(--heading --margin-top); letter-spacing: normal; text-transform: none; - @include iro.bem-at-theme('typography') { - margin-top: fn.dim(--spacing --top); - margin-bottom: 0; - - & + & { - margin-top: fn.dim(--spacing --top-sibling); - } + & + & { + margin-top: fn.global-dim(--heading --margin-top-sibling); } @include iro.bem-modifier('xxl') { @@ -81,7 +68,7 @@ color: fn.color(--light); } - @include iro.bem-elem('inner') { + @include iro.bem-elem('primary') { background-image: linear-gradient( to top, transparent .15em, diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquote.scss deleted file mode 100644 index e997b9b..0000000 --- a/src/scopes/_blockquote.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('blockquote') { - @include iro.props-store(( - --dims: ( - --pad-x: fn.global-dim(--size --250), - --margin-top: fn.global-dim(--paragraph --margin-top), - ) - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --border: fn.global-color(--obj-hi), - ) - ), 'colors'); - - @include iro.bem-scope(iro.props-namespace()) { - blockquote { - margin: fn.dim(--margin-top) 0 0 1px; - padding-left: calc(fn.dim(--pad-x) - 3px); - border-left: 3px solid fn.color(--border); - } - } -} diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss new file mode 100644 index 0000000..8f25df9 --- /dev/null +++ b/src/scopes/_blockquotes.scss @@ -0,0 +1,25 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('blockquotes') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --250), + --margin-top: fn.global-dim(--paragraph --margin-top), + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + blockquote { + margin: fn.dim(--margin-top) 0 0 1px; + padding-left: calc(fn.dim(--pad-x) - 3px); + border-left: 3px solid fn.color(--border); + } + } +} 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 + ); + } + } +} diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss new file mode 100644 index 0000000..71dd9da --- /dev/null +++ b/src/scopes/_invisible-links.scss @@ -0,0 +1,15 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.props-namespace('invisible-links') { + @include iro.bem-scope(iro.props-namespace()) { + :link, + :visited { + color: currentColor; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} -- cgit v1.2.3-70-g09d2