tweak ColorCustomizer.svelte CSS

janosh · Jul 5, 2022 · cdcf92e · cdcf92e
1 parent 6d03b75
commit cdcf92e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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,39 +53,45 @@
 <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;
     width: 3em;
     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
@@ -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
@@ -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