From bd65552c2d0d8374bf290323928e3c1712b25fbc Mon Sep 17 00:00:00 2001
From: mischa <mischa@rx.high5.nl>
Date: Sun, 11 Jun 2023 09:39:03 +0000
Subject: [PATCH] added css/html for inverse logo for darkmode

---
 index.md  |  4 +++-
 style.css | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/index.md b/index.md
index 7717524..f8802b3 100644
--- a/index.md
+++ b/index.md
@@ -5,7 +5,9 @@
 <a href="/colophon.html">colophon</a>
 </p>
 
-<img class="mt4" src="vi-sw.png">
+<div class="logo-container">
+  <img id="logo" class="mt4" src="vi-sw.png" alt="Logo">
+</div>
 
 _Why? [vi](https://en.wikipedia.org/wiki/Vi) is the **de facto** standard
 text editor in any Unix-like operating system._
diff --git a/style.css b/style.css
index e11b8cd..a9cd3ae 100644
--- a/style.css
+++ b/style.css
@@ -241,10 +241,23 @@ h2 { font-size: 1.25rem; }
 
 .cut *, .cut *::before { color: #ccc; background-color: #f4f4f4; }
 
+.logo-container {
+  width: 150px; 
+  height: 150px;
+}
+
+.logo-container img {
+  width: 75%;
+  height: 75%;
+}
+
 @media (prefers-color-scheme: dark) {
   a, a:link, a:visited { color: #ffe489; }
   body, html { background-color: #111111; color: #888888; }
   pre { background-color: #111111; color: #aaaaaa; }
   .clean { background-color: #111111; color: #aaaaaa; }
+  .logo-container img {
+    filter: invert(100%); 
+  }
 }