From 416436b6a757479de8ce58fd87c4927cb52b541d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Jan 2023 12:42:16 +0100 Subject: Improved list page header --- assets/css/components/_subheader.scss | 39 +++++++++++++++++++++++++++++ assets/css/objects/_emoji.scss | 33 +++++++++++++++++++++++++ assets/css/objects/emoji.scss | 33 ------------------------- assets/css/scopes/_links.scss | 46 +++++++++++++++++++++++++++++++++++ assets/css/style.scss | 2 ++ 5 files changed, 120 insertions(+), 33 deletions(-) create mode 100644 assets/css/components/_subheader.scss create mode 100644 assets/css/objects/_emoji.scss delete mode 100644 assets/css/objects/emoji.scss create mode 100644 assets/css/scopes/_links.scss (limited to 'assets/css') diff --git a/assets/css/components/_subheader.scss b/assets/css/components/_subheader.scss new file mode 100644 index 0000000..df8eb50 --- /dev/null +++ b/assets/css/components/_subheader.scss @@ -0,0 +1,39 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'iro-design/src/mixins' as mx; + +@include iro.props-namespace('subheader') { + @include iro.props-store(( + --colors: ( + --fg: fn.global-color(--fg), + --strong: fn.global-color(--fg-lo), + ), + ), 'colors'); + + @include iro.bem-component(iro.props-namespace()) { + @include mx.set-font(--headline, ( + --line-height: null, + --size: fn.global-dim(--font-size --400), + --weight: normal + )); + + color: fn.color(--fg); + + > * { + display: inline; + margin: 0; + } + + strong { + color: fn.color(--strong); + font-weight: 500; + } + + @include iro.bem-elem('title') { + font-size: inherit; + font-weight: 800; + letter-spacing: 1px; + text-transform: uppercase; + } + } +} diff --git a/assets/css/objects/_emoji.scss b/assets/css/objects/_emoji.scss new file mode 100644 index 0000000..8387e1d --- /dev/null +++ b/assets/css/objects/_emoji.scss @@ -0,0 +1,33 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('emoji') { + @include iro.props-store(( + --dims: ( + --size: 1em, + --rounding: 3px, + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline; + width: fn.dim(--size); + height: fn.dim(--size); + margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); + padding: fn.dim(--rounding); + transform: scale(1.5); + transition: transform .2s ease, background-color .2s ease; + border-radius: calc(fn.dim(--rounding) / 3); + + &:hover { + transform: scale(3); + background-color: fn.color(--bg); + } + } +} diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/emoji.scss deleted file mode 100644 index 8387e1d..0000000 --- a/assets/css/objects/emoji.scss +++ /dev/null @@ -1,33 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use 'iro-design/src/functions' as fn; - -@include iro.props-namespace('emoji') { - @include iro.props-store(( - --dims: ( - --size: 1em, - --rounding: 3px, - ) - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --bg: fn.global-color(--obj-hi), - ) - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline; - width: fn.dim(--size); - height: fn.dim(--size); - margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); - padding: fn.dim(--rounding); - transform: scale(1.5); - transition: transform .2s ease, background-color .2s ease; - border-radius: calc(fn.dim(--rounding) / 3); - - &:hover { - transform: scale(3); - background-color: fn.color(--bg); - } - } -} diff --git a/assets/css/scopes/_links.scss b/assets/css/scopes/_links.scss new file mode 100644 index 0000000..a08ccd8 --- /dev/null +++ b/assets/css/scopes/_links.scss @@ -0,0 +1,46 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('links') { + @include iro.props-store(( + --colors: ( + --idle: fn.global-color(--accent --link-idle --obj-lo), + --visited: fn.global-color(--accent --link-visited --obj-lo), + --key-focus: ( + --border: fn.global-color(--focus --fill), + --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), + ), + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + :link { + text-decoration: underline; + } + + :visited { + text-decoration: underline; + } + + :link, + :visited { + border-radius: .5px; + + @include iro.bem-at-theme('keyboard') { + &:focus { + box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + } + } + } + + @include iro.bem-modifier('colored') { + :link { + color: fn.color(--idle); + } + + :visited { + color: fn.color(--visited); + } + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 20bcc27..1225b2e 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -22,6 +22,7 @@ @use 'components/main'; @use 'components/footer'; @use 'components/header'; +@use 'components/subheader'; @use 'components/hnav'; @use 'components/card'; @use 'components/figure'; @@ -36,6 +37,7 @@ @use 'iro-design/src/scopes/tables' as iro-tables; @use 'scopes/small'; @use 'scopes/alerts'; +@use 'scopes/links'; @use 'iro-design/src/utils'; -- cgit v1.2.3-54-g00ecf