figbert.com-website

commit bc8ae65297caffff4551256e1d4164c17a48d8e0
parent 0218ec5f2d8896fdb3f58ca7cafb9b6dff3df34c
Author: FIGBERT <figbert@figbert.com>
Date:   Mon, 24 Aug 2020 23:03:29 -0700

:art: Move emojis from img tags to inline svg

To reduce the number of requests to the server, the redesigned emoji shortcodes embed the emoji svg directly into the HTML instead of through an img tag.

Additionally, a `height: auto;` element has been added to the emoji class so that it is clearly defined and doesn't create unforseen CSS problems.

Diffstat:
M
static/global.css
 | 
3
++-
M
templates/shortcodes/emoji.html
 | 
2
+-

2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/static/global.css b/static/global.css
@@ -88,8 +88,9 @@ h6::before {
   color: var(--secondary-color);
 }
 
-.emoji {
+.emoji > svg {
   width: 2rem;
+  height: auto;
   vertical-align: top;
 }
 
diff --git a/templates/shortcodes/emoji.html b/templates/shortcodes/emoji.html
@@ -1,2 +1,2 @@
-<img src="/emoji/{{ name }}.svg" alt="{{ alt }}" class="emoji"/>
+<span class="emoji" role="img" aria-label="{{ alt }}">{{ load_data(path="static/emoji/" ~ name ~ ".svg", format="plain") | safe }}</span>