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.
The `span`'s needed an inline-block for the transform to wrok
I also added an `overflow: hidden;` because these functions can make the text go beyond the borders of the StatusBody
With `overflow: hidden;`, it won't show outside of the borders
These now work for the new, FEP-c16b compliant, representation
Nesting also works
It already worked for text and "normal" emoji, but now it also works for custom emoji
MFM was defined in three places.
There was ./src/components/status_body/status_body.scss => I moved this to ./src/components/status_content/mfm.scss
There was ./src/components/status_content/status_content.vue => I moved this to ./src/components/status_content/mfm.scss
There's ./static/mfm.css => I kept this as-is
./src/components/status_content/mfm.scss is now being loaded in ./src/components/status_content/status_content.vue
I added a comment in both ./src/components/status_content/mfm.scss and ./static/mfm.css referencing each other
Note that this is just a first step in an overhoal of how MFM is handled. It seemed easier to do this as a first step and then build further on that.
