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 ++++++++ tpl/index.pug | 2 +- tpl/objects/heading.pug | 6 ++-- tpl/views/blockquote.pug | 4 +-- tpl/views/code.pug | 2 +- tpl/views/heading.pug | 12 +++++-- 13 files changed, 150 insertions(+), 54 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 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; + } + } + } +} diff --git a/tpl/index.pug b/tpl/index.pug index 7c3696e..7bb59a0 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -36,7 +36,7 @@ mixin view(id, title) views.push({ id, title }); +container(narrow=true class='u-p-700 c-view' id=id) - +h1-heading('xl')= title + +h1-heading('xl')(class='u-mt-0')= title +divider('medium') block diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index aa3fec9..47ffefa 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug @@ -32,11 +32,11 @@ mixin h6-heading(level) h6(class=classes)&attributes(attributes) block -mixin div-heading(level, inner = false) +mixin div-heading(level, primary = false) - let classes = ['o-heading', 'o-heading--' + level] div(class=classes)&attributes(attributes) - if inner - span.o-heading__inner + if primary + span.o-heading__primary block else block diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug index a346292..a5dc95c 100644 --- a/tpl/views/blockquote.pug +++ b/tpl/views/blockquote.pug @@ -1,6 +1,6 @@ mixin view-blockquote +view('blockquote', 'Blockquote') - .c-box.s-blockquote - p= loremIpsum + .c-box.s-blockquotes + p.u-mt-0= loremIpsum blockquote= loremIpsum p= loremIpsum diff --git a/tpl/views/code.pug b/tpl/views/code.pug index 552500d..21e16c8 100644 --- a/tpl/views/code.pug +++ b/tpl/views/code.pug @@ -1,7 +1,7 @@ mixin view-code +view('code', 'Code') .c-box.s-body - p= loremIpsum + p.u-mt-0= loremIpsum pre code. font-weight: 700; diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug index efdfb69..07080d5 100644 --- a/tpl/views/heading.pug +++ b/tpl/views/heading.pug @@ -1,15 +1,23 @@ mixin view-heading +view('heading', 'Heading') .c-box - h1= 'H1 default' + h1.u-mt-0= 'H1 default' h2= 'H2 default' h3= 'H3 default' h4= 'H4 default' h5= 'H5 default' h6= 'H6 default' + .c-box.s-headings + h1.u-mt-0: span.s-headings__primary= 'H1 styled' + h2= 'H2 styled' + h3= 'H3 styled' + h4= 'H4 styled' + h5= 'H5 styled' + h6= 'H6 styled' + .c-box - +div-heading('xxl', true)= 'XXL Heading' + +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading' +div-heading('xl')= 'XL Heading' +div-heading('lg')= 'LG Heading' +div-heading('md')= 'MD Heading' -- cgit v1.2.3-54-g00ecf