Better emojis, new intro

2 files changed, 13 insertions, 10 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);
diff --git a/content/index.md b/content/index.md
index d854641..54fd580 100644
--- a/content/index.md
+++ b/content/index.md
@@ -2,4 +2,4 @@
 title: Volpeon
 ---
 
-A red fox disguised as a software developer. Writes code, creates vector art and experiments with AI.
+Red fox and part-time dragon disguised as a software developer. I create vector art and experiment with AI. :drgn_mlem: