From ec8735d6f61077d282cbef87f551978b02a970ed Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Fri, 25 Apr 2025 20:57:31 +0200
Subject: [PATCH] css: images: black-on-white utility class

---
 src/_assets/css/base.css       | 9 +++++++++
 src/_assets/css/parts/hero.css | 5 -----
 src/_includes/parts/hero.njk   | 2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/_assets/css/base.css b/src/_assets/css/base.css
index ab038b2..d5574f8 100644
--- a/src/_assets/css/base.css
+++ b/src/_assets/css/base.css
@@ -137,6 +137,15 @@ th, td {
   padding-block-end: calc(1.75 * var(--step));
 }
 
+/* Images */
+
+img.black-on-white {}
+@media (prefers-color-scheme: dark) {
+  img.black-on-white {
+    filter: invert(1);
+  }
+}
+
 /* Separators */
 
 hr {
diff --git a/src/_assets/css/parts/hero.css b/src/_assets/css/parts/hero.css
index e16c845..6adcd0c 100644
--- a/src/_assets/css/parts/hero.css
+++ b/src/_assets/css/parts/hero.css
@@ -86,11 +86,6 @@
   width: calc(18 * var(--step));
   height: calc(36 * var(--step));
 }
-@media (prefers-color-scheme: dark) {
-  .hero .tower {
-    filter: invert(1);
-  }
-}
 @media (max-width: 500px) {
   .hero .tower {
     margin: calc(1 * var(--step));
diff --git a/src/_includes/parts/hero.njk b/src/_includes/parts/hero.njk
index b478faf..425578e 100644
--- a/src/_includes/parts/hero.njk
+++ b/src/_includes/parts/hero.njk
@@ -1,7 +1,7 @@
 <div class="hero">
   <div class="tower_cell">
     <img
-      class="tower"
+      class="tower black-on-white"
       alt="Xecut Logo Tower"
       src="/_assets/img/tower/tower_logo.svg"
     >