From 364a944dea5fb797da36303b5082c02fd6c3a1b3 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Jan 2023 18:25:18 +0100 Subject: Better emojis, new intro --- assets/css/objects/_emoji.scss | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) (limited to 'assets/css') diff --git a/assets/css/objects/_emoji.scss b/assets/css/objects/_emoji.scss index 8387e1d..64b1b41 100644 --- a/assets/css/objects/_emoji.scss +++ b/assets/css/objects/_emoji.scss @@ -4,7 +4,8 @@ @include iro.props-namespace('emoji') { @include iro.props-store(( --dims: ( - --size: 1em, + --size: 1.4em, + --pad: .2em, --rounding: 3px, ) ), 'dims'); @@ -16,14 +17,16 @@ ), '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); + display: inline; + position: relative; + top: calc(-.5em * fn.global-dim(--font --standard --line-height) + fn.dim(--rounding)); + width: fn.dim(--size); + height: fn.dim(--size); + margin: calc(-.5 * fn.dim(--size)) 0; + padding: fn.dim(--pad); + transition: transform .2s ease, background-color .2s ease; + border-radius: calc(fn.dim(--rounding) / 3); + vertical-align: bottom; &:hover { transform: scale(3); -- cgit v1.2.3-70-g09d2