Add header image to help with visual clarity

This PR adds a header image above the search bar to help with visual clarity of the palette. Previously, opening the palette above dark-ish backgrounds made it hard to easily spot its position. The addition of the brighter header image (that is directly attached to the search field) helps with that.
flbraun · Mar 16, 2024 · 19b102d · 19b102d
1 parent 644fe32
commit 19b102d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/assets/header.png b/assets/header.png
diff --git a/assets/main.css b/assets/main.css
@@ -66,6 +66,13 @@ body {
     width: 25%;
 }
 
+#header {
+    /* centers the header image horizontally */
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 #search {
     border: 8px solid var(--color-primary);
     border-top-left-radius: var(--radius);

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -14,11 +14,14 @@
 <body>
     <div class="spacer"></div>
     <div id="palette">
+        <img id="header" src="../../assets/header.png" />
         <input id="search" type="text" placeholder="Still sane, exile?" autocomplete="false" spellcheck="false" autofocus>
         <div id="resultlist"></div>
     </div>
     <div class="spacer"></div>
     <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
 
     <script src="./palette.js"></script>
 </body>