Better emojis, new intro

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 @@
 @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);