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 --- .gitignore | 1 + src/_base.scss | 17 ++++++++++--- src/_config.scss | 6 +++-- src/_declare-vars.scss | 23 ++++++++++++------ src/_functions.scss | 1 + src/_scopes.scss | 2 ++ src/layouts/_card.scss | 1 - src/layouts/_container.scss | 1 - src/objects/_alert.scss | 8 +++--- src/objects/_heading.scss | 37 +++++++++++++++++++--------- src/scopes/_blockquote.scss | 25 +++++++++++++++++++ src/scopes/_code.scss | 59 +++++++++++++++++++++++++++++++++++++++++++++ src_demo/_base.scss | 8 ++++++ tpl/index.pug | 4 +++ tpl/objects/heading.pug | 16 +++++++++--- tpl/views/blockquote.pug | 6 +++++ tpl/views/code.pug | 13 ++++++++++ tpl/views/heading.pug | 10 +++++++- 18 files changed, 202 insertions(+), 36 deletions(-) create mode 100644 src/scopes/_blockquote.scss create mode 100644 src/scopes/_code.scss create mode 100644 tpl/views/blockquote.pug create mode 100644 tpl/views/code.pug diff --git a/.gitignore b/.gitignore index 36170a7..0e8837b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules public +static/garet.woff2 diff --git a/src/_base.scss b/src/_base.scss index a0f785c..f861f5e 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -2,6 +2,7 @@ @use 'iro-sass/src/index' as iro; @use 'functions' as fn; @use 'mixins' as mx; +@use 'config'; html, body { @@ -17,6 +18,12 @@ body { color: fn.color(--fg); } +html, +pre, +code { + font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; +} + pre, code { @include mx.set-font(--mono, (--size: fn.dim(--font-size --75))); @@ -38,10 +45,12 @@ h3, h4, h5, h6 { - margin: 0; - color: fn.color(--fg-lo); - font-size: 1em; - font-weight: bold; + margin: 0; + color: fn.color(--fg-lo); + font-size: fn.dim(--font-size --100); + font-weight: bold; + letter-spacing: 1px; + text-transform: uppercase; } p { diff --git a/src/_config.scss b/src/_config.scss index 68df69f..26a1ad4 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -4,8 +4,10 @@ iro.$vars-root-size: 16px; media.$breakpoints: ( - md: 40rem, - sm: 28rem + lg: 1340px, + md: 900px, + sm: 600px, + xs: 400px, ); media.$unit-intervals: ( diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 8ef68be..fcd281b 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -59,7 +59,7 @@ --line-height: 1.5, ), --headline: ( - --family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), + --family: ('Garet', fn.dim(--font --standard --family, null)), --line-height: 1.2, --weight: 700, ), @@ -70,13 +70,20 @@ ), --font-size: ( - --50: iro.fn-px-to-rem(11px), - --75: iro.fn-px-to-rem(13px), - --100: iro.fn-px-to-rem(14px), - --150: iro.fn-px-to-rem(16px), - --200: iro.fn-px-to-rem(18px), - --300: iro.fn-px-to-rem(22px), - --400: iro.fn-px-to-rem(28px), + --50: iro.fn-px-to-rem(11px), + --75: iro.fn-px-to-rem(13px), + --100: iro.fn-px-to-rem(14px), + --150: iro.fn-px-to-rem(16px), + --200: iro.fn-px-to-rem(18px), + --300: iro.fn-px-to-rem(20px), + --400: iro.fn-px-to-rem(24px), + --500: iro.fn-px-to-rem(28px), + --600: iro.fn-px-to-rem(32px), + --700: iro.fn-px-to-rem(36px), + --800: iro.fn-px-to-rem(40px), + --900: iro.fn-px-to-rem(45px), + --1000: iro.fn-px-to-rem(50px), + --1100: iro.fn-px-to-rem(60px), ), --border: ( diff --git a/src/_functions.scss b/src/_functions.scss index 7b43d95..4a91629 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -109,6 +109,7 @@ --bg: $base, --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), + --faint: rgba($base, .1), --semi: rgba($base, .4), --selection: rgba($base, .99), --fg: blend.contrast($base), diff --git a/src/_scopes.scss b/src/_scopes.scss index 772d4e8..92e6d14 100644 --- a/src/_scopes.scss +++ b/src/_scopes.scss @@ -1 +1,3 @@ @use 'scopes/colored-links'; +@use 'scopes/code'; +@use 'scopes/blockquote'; diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index 9e54d50..176df06 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -1,5 +1,4 @@ @use 'iro-sass/src/index' as iro; -@use 'include-media/dist/include-media' as media; @use '../functions' as fn; @include iro.props-namespace('card') { diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 521262d..3e3fcac 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -1,5 +1,4 @@ @use 'iro-sass/src/index' as iro; -@use 'include-media/dist/include-media' as media; @use '../functions' as fn; @include iro.props-namespace('container') { 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 + ); + } } } diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquote.scss new file mode 100644 index 0000000..e997b9b --- /dev/null +++ b/src/scopes/_blockquote.scss @@ -0,0 +1,25 @@ +@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/_code.scss b/src/scopes/_code.scss new file mode 100644 index 0000000..d4b70ee --- /dev/null +++ b/src/scopes/_code.scss @@ -0,0 +1,59 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('body') { + @include iro.props-store(( + --dims: ( + --inline: ( + --pad-x: fn.global-dim(--size --50), + --pad-y: fn.global-dim(--size --10), + --rounding: 3px, + ), + --block: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + --margin-top: fn.global-dim(--paragraph --margin-top), + --rounding: 3px, + ) + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --inline: ( + --fg: fn.global-color(--accent --primary --obj-lo), + --bg: fn.global-color(--accent --primary --faint), + ), + --block: ( + --fg: fn.global-color(--fg), + --bg: fn.global-color(--bg-hi), + ) + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + code { + padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x); + border-radius: fn.dim(--inline --rounding); + background-color: fn.color(--inline --bg); + color: fn.color(--inline --fg); + } + + pre { + margin: fn.dim(--block --margin-top) 0 0 0; + padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x); + border-radius: fn.dim(--block --rounding); + background-color: fn.color(--block --bg); + color: fn.color(--block --fg); + + code { + display: inline-block; + margin-right: fn.dim(--block --pad-x); + padding: 0; + border-radius: 0; + background-color: transparent; + color: currentColor; + } + } + } +} diff --git a/src_demo/_base.scss b/src_demo/_base.scss index 8dcd789..129b319 100644 --- a/src_demo/_base.scss +++ b/src_demo/_base.scss @@ -3,3 +3,11 @@ body { grid-template-columns: auto 1fr; grid-template-areas: 'sidebar content'; } + +@font-face { + font-family: 'Garet'; + font-style: normal; + font-weight: 50 950; + font-display: swap; + src: url('/garet.woff2') format('woff2-variations'); +} diff --git a/tpl/index.pug b/tpl/index.pug index 6565589..7c3696e 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -52,6 +52,8 @@ mixin user-card(name, hue) include views/heading.pug include views/divider.pug include views/colored-links.pug +include views/code.pug +include views/blockquote.pug include views/badge.pug include views/button.pug include views/text-field.pug @@ -90,6 +92,8 @@ html +view-heading +view-divider +view-colored-links + +view-code + +view-blockquote +view-badge +view-button +view-text-field diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index a0de4af..aa3fec9 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug @@ -1,7 +1,11 @@ -mixin h1-heading(level) +mixin h1-heading(level, inner = false) - let classes = ['o-heading', 'o-heading--' + level] h1(class=classes)&attributes(attributes) - block + if inner + span.o-heading__inner + block + else + block mixin h2-heading(level) - let classes = ['o-heading', 'o-heading--' + level] @@ -28,7 +32,11 @@ mixin h6-heading(level) h6(class=classes)&attributes(attributes) block -mixin div-heading(level) +mixin div-heading(level, inner = false) - let classes = ['o-heading', 'o-heading--' + level] div(class=classes)&attributes(attributes) - block + if inner + span.o-heading__inner + block + else + block diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug new file mode 100644 index 0000000..a346292 --- /dev/null +++ b/tpl/views/blockquote.pug @@ -0,0 +1,6 @@ +mixin view-blockquote + +view('blockquote', 'Blockquote') + .c-box.s-blockquote + p= loremIpsum + blockquote= loremIpsum + p= loremIpsum diff --git a/tpl/views/code.pug b/tpl/views/code.pug new file mode 100644 index 0000000..552500d --- /dev/null +++ b/tpl/views/code.pug @@ -0,0 +1,13 @@ +mixin view-code + +view('code', 'Code') + .c-box.s-body + p= loremIpsum + pre + code. + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + p= loremIpsum + + .c-box.s-body. + And here is an #[code inline] code tag. diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug index a49c93d..efdfb69 100644 --- a/tpl/views/heading.pug +++ b/tpl/views/heading.pug @@ -1,7 +1,15 @@ mixin view-heading +view('heading', 'Heading') .c-box - +div-heading('xxl')= 'XXL Heading' + h1= 'H1 default' + h2= 'H2 default' + h3= 'H3 default' + h4= 'H4 default' + h5= 'H5 default' + h6= 'H6 default' + + .c-box + +div-heading('xxl', true)= 'XXL Heading' +div-heading('xl')= 'XL Heading' +div-heading('lg')= 'LG Heading' +div-heading('md')= 'MD Heading' -- cgit v1.2.3-70-g09d2