diff options
author | Volpeon <git@volpeon.ink> | 2023-01-10 18:25:18 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-01-10 18:25:18 +0100 |
commit | 364a944dea5fb797da36303b5082c02fd6c3a1b3 (patch) | |
tree | 11922af32a027171ca183afc1ced675c6fdf3212 /assets/css | |
parent | Updated headings (diff) | |
download | volpeon.ink-364a944dea5fb797da36303b5082c02fd6c3a1b3.tar.gz volpeon.ink-364a944dea5fb797da36303b5082c02fd6c3a1b3.tar.bz2 volpeon.ink-364a944dea5fb797da36303b5082c02fd6c3a1b3.zip |
Better emojis, new intro
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/objects/_emoji.scss | 21 |
1 files changed, 12 insertions, 9 deletions
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 @@ | |||
4 | @include iro.props-namespace('emoji') { | 4 | @include iro.props-namespace('emoji') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --size: 1em, | 7 | --size: 1.4em, |
8 | --pad: .2em, | ||
8 | --rounding: 3px, | 9 | --rounding: 3px, |
9 | ) | 10 | ) |
10 | ), 'dims'); | 11 | ), 'dims'); |
@@ -16,14 +17,16 @@ | |||
16 | ), 'colors'); | 17 | ), 'colors'); |
17 | 18 | ||
18 | @include iro.bem-object(iro.props-namespace()) { | 19 | @include iro.bem-object(iro.props-namespace()) { |
19 | display: inline; | 20 | display: inline; |
20 | width: fn.dim(--size); | 21 | position: relative; |
21 | height: fn.dim(--size); | 22 | top: calc(-.5em * fn.global-dim(--font --standard --line-height) + fn.dim(--rounding)); |
22 | margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); | 23 | width: fn.dim(--size); |
23 | padding: fn.dim(--rounding); | 24 | height: fn.dim(--size); |
24 | transform: scale(1.5); | 25 | margin: calc(-.5 * fn.dim(--size)) 0; |
25 | transition: transform .2s ease, background-color .2s ease; | 26 | padding: fn.dim(--pad); |
26 | border-radius: calc(fn.dim(--rounding) / 3); | 27 | transition: transform .2s ease, background-color .2s ease; |
28 | border-radius: calc(fn.dim(--rounding) / 3); | ||
29 | vertical-align: bottom; | ||
27 | 30 | ||
28 | &:hover { | 31 | &:hover { |
29 | transform: scale(3); | 32 | transform: scale(3); |