From 177d96f977e6656662d896465c82c6c0c112d5d1 Mon Sep 17 00:00:00 2001
From: ilja space <git@ilja.space>
Date: Fri, 1 Nov 2024 14:25:22 +0100
Subject: [PATCH] Improve how scaling is done

During code review a much better way was pointed out to do the emoji scaling, by using `em`.

*key uses 2em for emoji, which is smaller than Akkoma has. I now kept the 38px for Akkoma,
but when "zoom" (ie x2, x3, x4, tada) happens, we set to 2em and zoom from there.
---
 src/components/status_body/status_body.scss |  1 -
 src/components/status_content/mfm.scss      | 29 ++-------------------
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 2e3bef8c..3d70ca47 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -13,7 +13,6 @@
   }
   .emoji {
     --_still_image-label-scale: 0.5;
-    /* NOTE: We also use this value hard-coded in src/components/status_content/mfm.scss */
     --emoji-size: 38px;
   }
 
diff --git a/src/components/status_content/mfm.scss b/src/components/status_content/mfm.scss
index 429a79a6..19443ac3 100644
--- a/src/components/status_content/mfm.scss
+++ b/src/components/status_content/mfm.scss
@@ -63,46 +63,24 @@
 
   .mfm-x2 {
     --mfm-zoom-size: 200%;
-    /*
-     emoji is normally 38px (see src/components/status_body/status_body.scss
-     we want x2 to be ~100px, so we enlarge (100px/38px) ~= 2.63
-    */
-    .emoji {
-      --mfm-emoji-zoom-size: 2.63;
-    }
   }
 
   .mfm-x3 {
     --mfm-zoom-size: 400%;
-    /*
-     emoji is normally 38px (see src/components/status_body/status_body.scss
-     we want x3 to be ~150px, so we enlarge (150px/38px) ~= 3.95
-    */
-    .emoji {
-      --mfm-emoji-zoom-size: 3.95;
-    }
   }
 
   .mfm-x4 {
     --mfm-zoom-size: 600%;
-    /*
-     emoji is normally 38px (see src/components/status_body/status_body.scss
-     we want x4 to be ~200px, so we enlarge (200px/38px) ~= 5.26
-    */
-    .emoji {
-      --mfm-emoji-zoom-size: 5.26;
-    }
   }
 
   .mfm-x2,
   .mfm-x3,
   .mfm-x4,
   .mfm-tada {
-    font-size: var(--mfm-zoom-size);
     .emoji {
-      --nested-emoji-base-size: calc(var(--emoji-size) * var(--mfm-emoji-zoom-size));
-      height: var(--nested-emoji-base-size);
+      --emoji-size: 2em;
     }
+    font-size: var(--mfm-zoom-size);
 
     .mfm-x2,
     .mfm-x3,
@@ -110,9 +88,6 @@
     .mfm-tada {
       /* only half effective */
       font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
-      .emoji {
-        height: calc(var(--nested-emoji-base-size) * var(--mfm-emoji-zoom-size) / 2);
-      }
 
       .mfm-x2,
       .mfm-x3,