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/_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 +++++++++++++++++++++++++++++++++++++++++++++ 11 files changed, 149 insertions(+), 31 deletions(-) create mode 100644 src/scopes/_blockquote.scss create mode 100644 src/scopes/_code.scss (limited to 'src') 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; + } + } + } +} -- cgit v1.2.3-70-g09d2