drop year heatmap, add covalent_radius + first_ionization instead

add physical units to multiselect options
janosh · Jun 4, 2022 · 6b2953e · 6b2953e
1 parent 92d9941
commit 6b2953e
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -9,13 +9,14 @@
   let windowWidth: number
 
   const heatmap_options: Record<string, keyof Element> = {
-    'Atomic Mass': `atomic_mass`,
-    'Atomic Radius': `atomic_radius`,
+    'Atomic Mass (u)': `atomic_mass`,
+    'Atomic Radius (Å)': `atomic_radius`,
+    'Covalent Radius (Å)': `covalent_radius`,
     Electronegativity: `electronegativity`,
-    Density: `density`,
-    'Boiling Point': `boiling_point`,
-    'Melting Point': `melting_point`,
-    'Year of Discovery': `year`,
+    'Density (solid: g/cm³, gas: g/liter)': `density`,
+    'Boiling Point (K)': `boiling_point`,
+    'Melting Point (K)': `melting_point`,
+    'First Ionization Energy (eV)': `first_ionization`,
   }
   $: heatmap_name = heatmap_options[selected_heatmap[0]] ?? null
 </script>
@@ -34,11 +35,13 @@
     placeholder="Select a heat map"
   />
 
-  <Table showNames={windowWidth > 1000} {heatmap_name} />
+  <Table show_names={windowWidth > 1000} {heatmap_name} />
 </main>
 
 <footer>
-  <a href="https://github.com/janosh/periodic-table">MIT License 2022</a>
+  <a href="https://github.com/janosh/periodic-table/blob/main/license">
+    MIT License 2022
+  </a>
 </footer>
 
 <style>
@@ -49,18 +52,24 @@
     --ghc-color: var(--page-bg);
     --ghc-bg: white;
     --sms-options-bg: black;
-    --sms-max-width: 16em;
+    --sms-max-width: 22em;
+    --sms-border: 1px dotted teal;
+    --sms-focus-border: 1px dotted cornflowerblue;
   }
   :global(div.multiselect) {
     margin: auto;
   }
+  :global(div.multiselect input::placeholder) {
+    opacity: 0.8;
+    padding: 1ex;
+  }
   h1 {
     text-align: center;
     line-height: 1.1;
     font-size: clamp(20pt, 5.5vw, 50pt);
   }
   footer {
-    margin: 4em 0;
+    margin: 6em 0 0;
     text-align: center;
   }
 </style>