From 992332a0a02519f1155eca113353aa7dafe362ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Jan 2023 15:24:44 +0100 Subject: Added smaller set of headings --- package.json | 2 +- src/objects/_heading.scss | 29 ++++++++++++++++++----------- src/scopes/_headings.scss | 29 ++++++++++++++++++----------- tpl/objects/heading.pug | 40 ++++++++++++++++------------------------ tpl/views/heading.pug | 20 ++++++++++++++++++-- 5 files changed, 71 insertions(+), 49 deletions(-) diff --git a/package.json b/package.json index 33d0a79..a278393 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", - "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000" + "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" }, "dependencies": { "@oddbird/blend": "^0.2.3", diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 6264072..56d4987 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -27,17 +27,17 @@ @include iro.bem-modifier('xxl') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --900); + font-size: fn.global-dim(--font-size --400); } @include iro.bem-modifier('xl') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --600); + font-size: fn.global-dim(--font-size --300); } @include iro.bem-modifier('lg') { color: fn.color(--strong); - font-size: fn.global-dim(--font-size --300); + font-size: fn.global-dim(--font-size --200); } @include iro.bem-modifier('md') { @@ -71,14 +71,21 @@ color: fn.color(--light); } - @include iro.bem-elem('primary') { - background-image: linear-gradient( - to top, - transparent .15em, - fn.color(--bg) .15em, - fn.color(--bg) .6em, - transparent .6em - ); + @include iro.bem-modifier('display') { + @include iro.bem-modifier('xxl') { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --900); + } + + @include iro.bem-modifier('xl') { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --600); + } + + @include iro.bem-modifier('l') { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --300); + } } } } diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 58bac7f..fc4991a 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -21,17 +21,17 @@ h1 { color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --900); + font-size: fn.global-dim(--font-size --400); } h2 { color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --600); + font-size: fn.global-dim(--font-size --300); } h3 { color: fn.foreign-color(--heading, --strong); - font-size: fn.global-dim(--font-size --300); + font-size: fn.global-dim(--font-size --200); } h4 { @@ -65,14 +65,21 @@ 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 - ); + @include iro.bem-modifier('display') { + h1 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --900); + } + + h2 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --600); + } + + h3 { + color: fn.foreign-color(--heading, --strong); + font-size: fn.global-dim(--font-size --300); + } } } } diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index 47ffefa..6cc05ad 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug @@ -1,42 +1,34 @@ -mixin h1-heading(level, inner = false) - - let classes = ['o-heading', 'o-heading--' + level] +mixin h1-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] h1(class=classes)&attributes(attributes) - if inner - span.o-heading__inner - block - else - block + block -mixin h2-heading(level) - - let classes = ['o-heading', 'o-heading--' + level] +mixin h2-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] h2(class=classes)&attributes(attributes) block -mixin h3-heading(level) - - let classes = ['o-heading', 'o-heading--' + level] +mixin h3-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] h3(class=classes)&attributes(attributes) block -mixin h4-heading(level) - - let classes = ['o-heading', 'o-heading--' + level] +mixin h4-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] h4(class=classes)&attributes(attributes) block -mixin h5-heading(level) - - let classes = ['o-heading', 'o-heading--' + level] +mixin h5-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] h5(class=classes)&attributes(attributes) block -mixin h6-heading(level) - - let classes = ['o-heading', 'o-heading--' + level] +mixin h6-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] h6(class=classes)&attributes(attributes) block -mixin div-heading(level, primary = false) - - let classes = ['o-heading', 'o-heading--' + level] +mixin div-heading(level, display = false) + - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] div(class=classes)&attributes(attributes) - if primary - span.o-heading__primary - block - else - block + block diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug index 07080d5..bc16cee 100644 --- a/tpl/views/heading.pug +++ b/tpl/views/heading.pug @@ -9,17 +9,33 @@ mixin view-heading h6= 'H6 default' .c-box.s-headings - h1.u-mt-0: span.s-headings__primary= 'H1 styled' + h1.u-mt-0= 'H1 styled' h2= 'H2 styled' h3= 'H3 styled' h4= 'H4 styled' h5= 'H5 styled' h6= 'H6 styled' + .c-box.s-headings.s-headings--display + h1.u-mt-0= 'H1 display styled' + h2= 'H2 display styled' + h3= 'H3 display styled' + h4= 'H4 display styled' + h5= 'H5 display styled' + h6= 'H6 display styled' + .c-box - +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading' + +div-heading('xxl')(class='u-mt-0')= 'XXL Heading' +div-heading('xl')= 'XL Heading' +div-heading('lg')= 'LG Heading' +div-heading('md')= 'MD Heading' +div-heading('sm')= 'SM Heading' +div-heading('xs')= 'XS Heading' + + .c-box + +div-heading('xxl', true)(class='u-mt-0')= 'XXL display Heading' + +div-heading('xl', true)= 'XL display Heading' + +div-heading('lg', true)= 'LG display Heading' + +div-heading('md', true)= 'MD display Heading' + +div-heading('sm', true)= 'SM display Heading' + +div-heading('xs', true)= 'XS display Heading' -- cgit v1.2.3-70-g09d2