From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 09:44:04 +0200 Subject: Re-implemented design via iro-design --- assets/css/scopes/_body.scss | 83 ------------------------- assets/css/scopes/_colored-links.scss | 20 ------ assets/css/scopes/_headlines.scss | 104 -------------------------------- assets/css/scopes/_intro.scss | 8 --- assets/css/scopes/_invisible-links.scss | 13 ---- assets/css/scopes/_small.scss | 23 ++++--- 6 files changed, 16 insertions(+), 235 deletions(-) delete mode 100644 assets/css/scopes/_body.scss delete mode 100644 assets/css/scopes/_colored-links.scss delete mode 100644 assets/css/scopes/_headlines.scss delete mode 100644 assets/css/scopes/_intro.scss delete mode 100644 assets/css/scopes/_invisible-links.scss (limited to 'assets/css/scopes') diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss deleted file mode 100644 index 1fc8166..0000000 --- a/assets/css/scopes/_body.scss +++ /dev/null @@ -1,83 +0,0 @@ -@include namespace('body') { - @include store(( - --colors: ( - --code: ( - --fg: prop(--colors --accent --strong, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - ), - --code-block: ( - --fg: prop(--colors --fg, $global: true), - --bg: prop(--colors --bg-lo, $global: true), - ), - --blockquote: ( - --border: prop(--colors --obj-hi, $global: true), - ) - ), - --dims: ( - --code: ( - --pad-x: .3em, - --pad-y: .1em - ), - --code-block: ( - --pad-x: 1em, - --pad-y: .7em - ) - ) - )); - - @include store(( - --colors: ( - --code: ( - --bg: prop(--colors --accent --faint, $global: true), - ), - --code-block: ( - --bg: prop(--colors --bg-hi, $global: true), - ), - ) - ), 'light'); - - @include scope(namespace()) { - @include element('meta') { - + h1 { - margin-top: $line-height * .5rem; - } - } - - img { - max-width: 100%; - } - - code { - padding: prop(--dims --code --pad-y) prop(--dims --code --pad-x); - border-radius: 3px; - background-color: prop(--colors --code --bg); - color: prop(--colors --code --fg); - } - - blockquote { - margin: ($line-height * 1rem) 0 0 1px; - padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); - border-left: 3px solid prop(--colors --blockquote --border); - } - - pre { - margin: ($line-height * 1rem) 0 0 0; - padding: prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x); - background-color: prop(--colors --code-block --bg); - color: prop(--colors --code-block --fg); - - code { - display: inline-block; - margin-right: prop(--dims --code-block --pad-x); - padding: 0; - border-radius: 0; - background-color: transparent; - color: currentColor; - } - - @media print { - border: 2px solid currentColor; - } - } - } -} diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss deleted file mode 100644 index 9be0f93..0000000 --- a/assets/css/scopes/_colored-links.scss +++ /dev/null @@ -1,20 +0,0 @@ -@include namespace('colored-links') { - @include store(( - --colors: ( - --link: ( - --idle: prop(--colors --link --colored --idle, $global: true), - --visited: prop(--colors --link --colored --visited, $global: true), - ) - ) - )); - - @include scope(namespace()) { - :link { - color: prop(--colors --link --idle); - } - - :visited { - color: prop(--colors --link --visited); - } - } -} diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss deleted file mode 100644 index bfd5caa..0000000 --- a/assets/css/scopes/_headlines.scss +++ /dev/null @@ -1,104 +0,0 @@ -@include namespace('headlines') { - @include store(( - --colors: ( - --link: ( - --idle-fg: prop(--colors --obj, $global: true), - --hover-fg: prop(--colors --fg-lo, $global: true), - ), - --emph: ( - --bg: prop(--colors --bg-hi, $global: true), - --body-bg: prop(--colors --bg-hi, $global: true), - ) - ) - )); - - @include store(( - --colors: ( - --emph: ( - --body-bg: prop(--colors --bg, $global: true), - ) - ) - ), 'light'); - - @include scope(namespace()) { - h1, - h2, - h3 { - font-family: $font-fam--large; - font-weight: 600; - letter-spacing: normal; - line-height: 1.4; - text-transform: none; - font-feature-settings: 'ss02' 1; - } - - h1, - h2, - h3, - h4 { - transform: translateX(-.06em); - } - - h1 { - @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); - } - - h2 { - @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); - } - - h3 { - @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); - } - - h5, - h6 { - color: currentColor; - font-weight: 400; - } - - @include element('title-inner') { - background-image: linear-gradient( - to top, - transparent .15em, - #{prop(--colors --emph --bg)} .15em, - #{prop(--colors --emph --bg)} .6em, - transparent .6em - ); - } - - @include element('link') { - display: none; - margin: -.5rem 0; - padding: .5rem; - vertical-align: -.02em; - - svg { - width: px-to-em(12px); - height: px-to-em(12px); - } - - &:link, - &:visited { - color: prop(--colors --link --idle-fg); - - &:hover { - color: prop(--colors --link --hover-fg); - } - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - &:hover { - @include element('link') { - display: inline-block; - } - } - } - } -} diff --git a/assets/css/scopes/_intro.scss b/assets/css/scopes/_intro.scss deleted file mode 100644 index 6d4ac14..0000000 --- a/assets/css/scopes/_intro.scss +++ /dev/null @@ -1,8 +0,0 @@ -@include namespace('intro') { - @include scope(namespace()) { - h1 + p { - font-size: px-to-em(20px, 18px); - font-style: italic; - } - } -} diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss deleted file mode 100644 index e4d149e..0000000 --- a/assets/css/scopes/_invisible-links.scss +++ /dev/null @@ -1,13 +0,0 @@ -@include namespace('invisible-links') { - @include scope(namespace()) { - :link, - :visited { - color: currentColor; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } -} diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss index f7aa61c..a4cc596 100644 --- a/assets/css/scopes/_small.scss +++ b/assets/css/scopes/_small.scss @@ -1,16 +1,25 @@ -@include namespace('small') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('small') { + @include iro.props-store(( --colors: ( - --fg: prop(--colors --fg-hi, $global: true), + --fg: fn.global-color(--fg-hi), + ), + ), 'colors'); + + @include iro.props-store(( + --dims: ( + --margin-top: fn.global-dim(--size --75), ) - )); + ), 'dims'); - @include scope(namespace()) { - color: prop(--colors --fg); + @include iro.bem-scope(iro.props-namespace()) { + color: fn.color(--fg); line-height: 1.4; p { - margin-top: $line-height * .25rem; + margin-top: fn.dim(--margin-top); } } } -- cgit v1.2.3-54-g00ecf