From b77abe868e9c4fe62831c19380ffb5158b1a0f92 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 23 Jul 2022 20:42:34 -0700
Subject: [PATCH] add src/routes/bohr-atoms.svelte

---
 src/app.css                  |  2 +-
 src/lib/Footer.svelte        |  2 +-
 src/lib/ScatterPlot.svelte   |  2 +-
 src/routes/bohr-atoms.svelte | 40 ++++++++++++++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/bohr-atoms.svelte

diff --git a/src/app.css b/src/app.css
index ab324a3..5bb81ab 100644
--- a/src/app.css
+++ b/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;
diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
index afdc338..6170934 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@@ -16,7 +16,7 @@
 
 <style>
   footer {
-    margin: 6em 0 0;
+    margin: 6em 0 2em;
     text-align: center;
   }
 </style>
diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
index 0d9fe53..d52c805 100644
--- a/src/lib/ScatterPlot.svelte
+++ b/src/lib/ScatterPlot.svelte
@@ -118,6 +118,6 @@
     dominant-baseline: hanging;
   }
   g.y-axis text {
-    dominant-baseline: middle;
+    dominant-baseline: central;
   }
 </style>
diff --git a/src/routes/bohr-atoms.svelte b/src/routes/bohr-atoms.svelte
new file mode 100644
index 0000000..19e11ab
--- /dev/null
+++ b/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>