add src/routes/bohr-atoms.svelte

src/app.css

@@ -3,7 +3,7 @@
 }
 body {
   background: var(--page-bg);
-  padding: 2vw 6vw;
+  padding: 6vh 6vw;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
   color: #eee;

src/lib/Footer.svelte

@@ -16,7 +16,7 @@
 
 <style>
   footer {
-    margin: 6em 0 0;
+    margin: 6em 0 2em;
     text-align: center;
   }
 </style>

src/lib/ScatterPlot.svelte

@@ -118,6 +118,6 @@
     dominant-baseline: hanging;
   }
   g.y-axis text {
-    dominant-baseline: middle;
+    dominant-baseline: central;
   }
 </style>

src/routes/bohr-atoms.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import BohrAtom from '../lib/BohrAtom.svelte'
+  import elements from '../periodic-table-data'
+</script>
+
+<h1>Bohr Atoms</h1>
+<ol>
+  {#each elements as { shells, symbol, number }}
+    <li>
+      <strong>{number}</strong>
+      <BohrAtom {shells} label={symbol} />
+    </li>
+  {/each}
+</ol>
+
+<style>
+  h1 {
+    text-align: center;
+  }
+  strong {
+    position: absolute;
+    margin: 0;
+    padding: 3pt 6pt;
+    background-color: rgba(255, 255, 255, 0.06);
+    border-bottom-right-radius: 1ex;
+    border-top-left-radius: 1ex;
+  }
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    place-content: center;
+    padding: 0;
+  }
+  li {
+    display: inline-block;
+    background-color: rgba(255, 255, 255, 0.04);
+    margin: 1ex;
+    border-radius: 1ex;
+  }
+</style>