From 7a179ca33059a14d63f6ab53262f73ee52d1f8bd Mon Sep 17 00:00:00 2001
From: Lajos Meszaros <m_lajos@hotmail.com>
Date: Mon, 9 Sep 2024 14:10:19 +0200
Subject: [PATCH] feat(mods): add a different color to each tag

---
 mods/index.html |  2 +-
 style.css       | 26 +++++++++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/mods/index.html b/mods/index.html
index a314080..5fb4c80 100644
--- a/mods/index.html
+++ b/mods/index.html
@@ -62,7 +62,7 @@ <h2>Mods</h2>
             <a href="https://github.com/meszaros-lajos-gyorgy/arx-mod-potion-guard" target="_blank">Potion guard</a>
             <span>Prevents accidental waste of potions when player health or mana is full</span>
           </li>
-          <li data-type="vanilla-fix">
+          <li data-type="vanilla fix">
             <a href="https://github.com/meszaros-lajos-gyorgy/arx-mod-outpost-ambience-fix" target="_blank"
               >Outpost ambience fix</a
             >
diff --git a/style.css b/style.css
index d499e50..565c487 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,9 @@
 :root {
-  --bistre: #382210;
-  --smoky-black: #0f0704;
-  --walnut-brown: #6b6454;
-  --kobicha: #613e22;
-  --cornsilk: #fcf0cf;
+  --bistre: hsl(27, 56%, 15%); /* #382210 */
+  --smoky-black: hsl(16, 58%, 4%); /* #0f0704 */
+  --walnut-brown: hsl(42, 12%, 37%); /* #6b6454 */
+  --kobicha: hsl(27, 48%, 26%); /* #613e22 */
+  --cornsilk: hsl(44, 88%, 90%); /* #fcf0cf */
 }
 
 html,
@@ -206,3 +206,19 @@ em > a {
   line-height: 20px;
   vertical-align: top;
 }
+
+.mods li[data-type="vanilla fix"]::before {
+  background: hsl(270, 56%, 30%); // purple
+}
+
+.mods li[data-type="challenge"]::before {
+  background: hsl(25, 56%, 30%); // orange
+}
+
+.mods li[data-type="meme"]::before {
+  background: hsl(200, 56%, 30%); // turquoise
+}
+
+.mods li[data-type="other"]::before {
+  background: hsl(95, 56%, 30%); // green
+}