summaryrefslogtreecommitdiffstats
path: root/assets/css/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-10 18:25:18 +0100
committerVolpeon <git@volpeon.ink>2023-01-10 18:25:18 +0100
commit364a944dea5fb797da36303b5082c02fd6c3a1b3 (patch)
tree11922af32a027171ca183afc1ced675c6fdf3212 /assets/css/objects
parentUpdated headings (diff)
downloadvolpeon.ink-364a944dea5fb797da36303b5082c02fd6c3a1b3.tar.gz
volpeon.ink-364a944dea5fb797da36303b5082c02fd6c3a1b3.tar.bz2
volpeon.ink-364a944dea5fb797da36303b5082c02fd6c3a1b3.zip
Better emojis, new intro
Diffstat (limited to 'assets/css/objects')
-rw-r--r--assets/css/objects/_emoji.scss21
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);