From cdcf92e405a50417a416d18b534292a4bdd8dfa7 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Tue, 5 Jul 2022 15:37:45 +0200
Subject: [PATCH] tweak ColorCustomizer.svelte CSS

---
 src/app.css                    |  4 ++++
 src/lib/ColorCustomizer.svelte | 20 +++++++++++++-------
 src/lib/EasterEgg.svelte       |  1 -
 src/stores.ts                  |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4983350..d041bc1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -36,6 +36,10 @@ blockquote {
   background: rgba(255, 255, 255, 0.2);
   margin: 1em 0;
 }
+button {
+  cursor: pointer;
+  border: none;
+}
 
 :where(h1, h2, h3, h4, h5, h6) {
   scroll-margin-top: 100px;
diff --git a/src/lib/ColorCustomizer.svelte b/src/lib/ColorCustomizer.svelte
index a8e2bb2..7d2a1a4 100644
--- a/src/lib/ColorCustomizer.svelte
+++ b/src/lib/ColorCustomizer.svelte
@@ -39,10 +39,10 @@
         {category.replaceAll(`-`, ` `)}
         {#if category_colors[category] !== default_category_colors[category]}
           <button
-            on:click={() =>
+            on:click|preventDefault={() =>
               (category_colors[category] = default_category_colors[category])}
           >
-            <small>reset</small>
+            reset
           </button>
         {/if}
       </label>
@@ -53,20 +53,22 @@
 <style>
   div.grid {
     display: grid;
-    grid-template-columns: repeat(3, 12em);
-    gap: 2vw;
+    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
     place-content: center;
+    gap: 7pt;
   }
   div.grid > label {
+    padding: 1pt 6pt;
     display: flex;
     align-items: center;
     gap: 4pt;
+    border-radius: 3pt;
     text-transform: capitalize;
     font-weight: lighter;
     cursor: pointer;
   }
   div.grid > label:hover {
-    filter: brightness(130%);
+    background-color: rgba(255, 255, 255, 0.1);
   }
   div.grid > label > input {
     height: 3em;
@@ -74,18 +76,22 @@
     border: none;
     background-color: transparent;
     cursor: pointer;
+    aspect-ratio: 1;
   }
   h2 {
     text-align: center;
   }
   label > button {
     background: none;
-    border: none;
     color: white;
     opacity: 0;
     transition: 0.3s;
+    border-radius: 2pt;
   }
   label:hover > button {
-    opacity: 0.5;
+    opacity: 0.8;
+  }
+  label > button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
   }
 </style>
diff --git a/src/lib/EasterEgg.svelte b/src/lib/EasterEgg.svelte
index 140af1c..2f7503e 100644
--- a/src/lib/EasterEgg.svelte
+++ b/src/lib/EasterEgg.svelte
@@ -74,7 +74,6 @@
     bottom: 0;
     right: 0;
     background-color: rgba(255, 255, 255, 0.2);
-    border: none;
     color: white;
     padding: 4pt 6pt;
     border-radius: 1ex 0 0 0;
diff --git a/src/stores.ts b/src/stores.ts
index c3f7e79..c0fae9f 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -12,7 +12,7 @@ active_element.subscribe((el) => {
   if (el) last_element.set(el)
 })
 
-export const heatmap = writable<string | null>(null)
+export const heatmap = writable<keyof Element | null>(null)
 
 export const color_scale = writable<ScaleLinear<number, number, never> | null>(
   null