From b3b6e1c6585792289fc41593ae13b0a6cc7734ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Mon, 10 Jun 2024 11:44:21 +0200
Subject: [PATCH] fix: add BEM class on links icons

---
 src/lib/nav.html | 12 ++++++------
 src/lib/nav.scss | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/nav.html b/src/lib/nav.html
index abc62a0..79744aa 100644
--- a/src/lib/nav.html
+++ b/src/lib/nav.html
@@ -19,22 +19,22 @@
     <div class="nav-bar--separator"></div>
     <div class="nav-bar--links">
       <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
-          <img src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
+          <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
       </a>
       <a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
-          <img src="/img/youtube-fill.svg" alt-text="Youtube"></img>
+          <img class="nav-bar--link-icon" src="/img/youtube-fill.svg" alt-text="Youtube"></img>
       </a>
       <a class="nav-bar--link" href="https://www.twitch.tv/frogcollective" target="_blank">
-          <img src="/img/twitch-fill.svg" alt-text="Twitch"></img>
+          <img class="nav-bar--link-icon" src="/img/twitch-fill.svg" alt-text="Twitch"></img>
       </a>
       <a class="nav-bar--link" href="https://mastodon.social/@frogcollective" target="_blank">
-          <img src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
+          <img class="nav-bar--link-icon" src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
       </a>
       <a class="nav-bar--link" href="https://x.com/FrogCoGames" target="_blank">
-          <img src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
+          <img class="nav-bar--link-icon" src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
       </a>
       <a class="nav-bar--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-          <img src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
+          <img class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
       </a>
     </div>
     <div class="nav-bar--separator"></div>
diff --git a/src/lib/nav.scss b/src/lib/nav.scss
index 6f9a472..c47c5b5 100644
--- a/src/lib/nav.scss
+++ b/src/lib/nav.scss
@@ -189,15 +189,15 @@
         align-self: center;
 
         padding: var(--space-small);
-
-        img {
-            width: 2em;
-            filter: invert(100%);
-        }
     }
 
     &--link {
         display: flex;
     }
+
+    &--link-icon {
+        width: 2em;
+        filter: invert(100%);
+    }
 }