From 7da4487ea9ea9be99914af455f5e07f7de16fe9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Brunet?= <maelbrunet@gmail.com>
Date: Sat, 22 May 2021 13:15:05 +0200
Subject: [PATCH] Add abbr for emoji-only content

---
 src/_includes/layouts/home.njk         | 2 +-
 src/_includes/layouts/recipes-list.njk | 2 +-
 src/scss/components/_card.scss         | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index 8fd3438..0ffe807 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -32,7 +32,7 @@ bodyClass: c-home
                             <div class="c-card__info">
                                 <div>
                                     {% for tag in recipe.data.tags %}
-                                        {{ tag | onlyEmoji | safe }}
+                                        <abbr class="c-card__tag-abbr" title="{{ tag | noEmoji }}">{{ tag | onlyEmoji }}</abbr>
                                     {% endfor %}
                                 </div>
                                 {% if recipe.data.time %}
diff --git a/src/_includes/layouts/recipes-list.njk b/src/_includes/layouts/recipes-list.njk
index 9eb7fa9..4db92be 100644
--- a/src/_includes/layouts/recipes-list.njk
+++ b/src/_includes/layouts/recipes-list.njk
@@ -19,7 +19,7 @@
                                 <div class="c-card__info">
                                     <div>
                                         {% for tag in recipe.data.tags %}
-                                            {{ tag | onlyEmoji | safe }}
+                                            <abbr class="c-card__tag-abbr" title="{{ tag | noEmoji }}">{{ tag | onlyEmoji }}</abbr>
                                         {% endfor %}
                                     </div>
                                     {% if recipe.data.time %}
diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss
index 84d215a..41cb467 100644
--- a/src/scss/components/_card.scss
+++ b/src/scss/components/_card.scss
@@ -46,6 +46,10 @@
     background-color: var(--color-primary);
 }
 
+.c-card__tag-abbr {
+    text-decoration: none;
+}
+
 .c-card__tag-first-letter {
     width: 22px;
     height: 22px;