templates/header: add logo image that is responsive to theme preference

Thanks to many people on Twitter that helped with this:
https://twitter.com/theprincessxena/status/1480767115993010177

Signed-off-by: Xe <me@christine.website>

1 files changed, 18 insertions, 0 deletions

diff --git a/css/shim.css b/css/shim.css
index 16b9d8c..d44b230 100644
--- a/css/shim.css
+++ b/css/shim.css
@@ -58,8 +58,26 @@ img {
     background-color: #282828;
 }
 
+.logo {
+    background-color: #fdf5d7;
+    -webkit-mask: url("/static/img/xeiaso.svg");
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask: url("/static/img/xeiaso.svg");
+    height: 32px;
+    width: 19px;
+    float: left;
+    display: inline;
+    margin: 3px;
+    vertical-align: middle;
+}
+
 @media (prefers-color-scheme: light) {
     .warning {
         background-color: #fbf1c7;
     }
+
+    .logo {
+        background-color: #1d2021;
+    }
 }