add BohrAtom to [slug].svelte

src/routes/[slug].svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { element_property_labels, heatmap_labels } from '../labels'
+  import BohrAtom from '../lib/BohrAtom.svelte'
   import ElementPhoto from '../lib/ElementPhoto.svelte'
+  import ElementStats from '../lib/ElementStats.svelte'
   import PropertySelect from '../lib/PropertySelect.svelte'
   import ScatterPlot from '../lib/ScatterPlot.svelte'
   import { active_element } from '../stores'
-  import { ChemicalElement } from '../types'
+  import type { ChemicalElement } from '../types'
 
   export let element: ChemicalElement
 
@@ -22,16 +24,18 @@
   const initial_heatmap = Object.keys(heatmap_labels)[1] as keyof ChemicalElement
 
   $: head_title = `${element.name} | Periodic Table`
+
+  let orbiting = true
+  let window_width: number
 </script>
 
+<svelte:window bind:innerWidth={window_width} />
+
 <svelte:head>
   <title>{head_title}</title>
   <meta property="og:title" content={head_title} />
 </svelte:head>
 
-<h1>{element.name}</h1>
-<h2>{element.category}</h2>
-
 <PropertySelect selected={[initial_heatmap]} />
 
 <section>
@@ -40,9 +44,17 @@
   <ScatterPlot />
 </section>
 
-{#if element.summary}
-  <p class="description">{@html element.summary}</p>
-{/if}
+<section>
+  {#if window_width > 900}
+    <ElementStats />
+  {/if}
+
+  <div on:click={() => (orbiting = !orbiting)}>
+    <BohrAtom {...element} adapt_size={true} {orbiting} />
+  </div>
+
+  <p style="flex: 1">{@html element.summary}</p>
+</section>
 
 <div class="properties">
   {#each key_vals as [label, value]}
@@ -55,24 +67,21 @@
 </div>
 
 <style>
-  h1,
-  h2 {
-    text-align: center;
-  }
-  h2 {
-    font-weight: lighter;
-    opacity: 0.7;
-  }
-  section {
+  section:nth-child(even) {
     margin: 2em 0;
     display: grid;
     gap: 2em;
     grid-template-columns: 1fr 2fr;
   }
-  p.description {
+  section:nth-child(odd) {
+    margin: 2em 0;
+    display: flex;
+    gap: 2em;
+    place-items: center;
+  }
+  section p {
     text-align: center;
-    opacity: 0.9;
-    margin: 3em auto;
+
     max-width: 50em;
   }
   div.properties {

src/routes/__layout.svelte

@@ -25,6 +25,7 @@
     --sms-max-width: 22em;
     --sms-border: 1px dotted teal;
     --sms-focus-border: 1px dotted cornflowerblue;
+    --sms-active-color: cornflowerblue;
   }
   :global(div.multiselect) {
     margin: auto;

src/routes/bohr-atoms.svelte

@@ -18,8 +18,10 @@
 <ol>
   {#each elements as { shells, symbol, number, name }}
     <li>
-      <strong><a href="/{name.toLowerCase()}">{number}</a></strong>
-      <BohrAtom {shells} label={symbol} {name} {orbiting} />
+      <strong>
+        <a href="/{name.toLowerCase()}">{number}</a>
+      </strong>
+      <BohrAtom {shells} {symbol} {name} {orbiting} />
     </li>
   {/each}
 </ol>

src/routes/index.svelte

@@ -6,7 +6,7 @@
   import PropertySelect from '../lib/PropertySelect.svelte'
   import { heatmap } from '../stores'
 
-  let windowWidth: number
+  let window_width: number
   let x_angle = 0
   let y_angle = 0
   let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none`
@@ -17,7 +17,7 @@
   <meta property="og:title" content="Periodic Table" />
 </svelte:head>
 
-<svelte:window bind:innerWidth={windowWidth} />
+<svelte:window bind:innerWidth={window_width} />
 
 <h1>Periodic Table of Elements</h1>
 
@@ -27,7 +27,7 @@
   style:transform="rotateX({x_angle}deg) rotateY({y_angle}deg)"
   class="auto-rotate-{auto_rotate}"
 >
-  <PeriodicTable show_names={windowWidth > 1000} />
+  <PeriodicTable show_names={window_width > 1000} />
 
   {#if !$heatmap}
     <ColorCustomizer collapsible={false} />
@@ -41,6 +41,7 @@
     text-align: center;
     line-height: 1.1;
     font-size: clamp(20pt, 5.5vw, 50pt);
+    margin: 0 1em 2em;
   }
   div.auto-rotate-x {
     animation: spin-x 30s linear infinite;