From 8e4c90a58e05ece552bb662662df0cf8f15cc63f Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Tue, 17 Jan 2023 21:03:07 -0800
Subject: [PATCH] reduce max-width landing page ptable, negative margins on
 bohr atom demo, replace Toggle with svelte-zoo's Toggle

---
 package.json                                  | 16 ++---
 src/app.css                                   |  1 +
 src/lib/Toggle.svelte                         | 61 -------------------
 src/lib/index.ts                              |  1 -
 .../{+page@.svelte => +page.svelte}           |  1 +
 src/routes/(demos)/color-scales/+page.svx     |  5 +-
 src/routes/+page.svelte                       |  2 +-
 src/site/Footer.svelte                        |  2 +-
 tests/periodic-table.test.ts                  |  8 ++-
 9 files changed, 21 insertions(+), 76 deletions(-)
 delete mode 100644 src/lib/Toggle.svelte
 rename src/routes/(demos)/bohr-atoms/{+page@.svelte => +page.svelte} (97%)

diff --git a/package.json b/package.json
index b1d1fbf..fd41064 100644
--- a/package.json
+++ b/package.json
@@ -31,17 +31,17 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.29.2",
-    "@sveltejs/adapter-static": "^1.0.3",
-    "@sveltejs/kit": "^1.1.1",
+    "@sveltejs/adapter-static": "^1.0.4",
+    "@sveltejs/kit": "^1.1.3",
     "@sveltejs/package": "^1.0.2",
     "@types/d3-array": "^3.0.4",
     "@types/d3-color": "^3.1.0",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-shape": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "@vitest/coverage-c8": "^0.27.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "@vitest/coverage-c8": "^0.27.2",
     "eslint": "^8.32.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
@@ -53,17 +53,17 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
-    "remark-math": "5.1.1",
+    "remark-math": "3.0.0",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.2",
     "svelte-multiselect": "^8.2.4",
     "svelte-preprocess": "^5.0.0",
     "svelte-toc": "^0.5.2",
-    "svelte-zoo": "^0.2.1",
+    "svelte-zoo": "^0.2.2",
     "svelte2tsx": "^0.6.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
-    "vitest": "^0.27.1"
+    "vitest": "^0.27.2"
   },
   "keywords": [
     "svelte",
diff --git a/src/app.css b/src/app.css
index 5f8122a..215a246 100644
--- a/src/app.css
+++ b/src/app.css
@@ -41,6 +41,7 @@ main {
   margin-bottom: 3em;
   width: 100%;
   max-width: 50em;
+  container-type: inline-size;
 }
 a {
   color: cornflowerblue;
diff --git a/src/lib/Toggle.svelte b/src/lib/Toggle.svelte
deleted file mode 100644
index c6b1cdb..0000000
--- a/src/lib/Toggle.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-  export let checked = false // whether the toggle is on or off
-  export let required = false
-  export let style = ``
-  export let id = ``
-
-  // normally input type=checkbox toggles on space bar, this handler also responds to enter
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === `Enter`) {
-      checked = !checked
-      event.preventDefault()
-    }
-  }
-</script>
-
-<label {style}>
-  <slot />
-  <input type="checkbox" bind:checked {id} {required} on:keydown={handleKeydown} />
-  <span />
-</label>
-
-<style>
-  label {
-    display: inline-flex;
-    align-items: center;
-    width: max-content;
-  }
-  span {
-    height: 1.5em;
-    width: 2.7em;
-    padding: 0.1em;
-    box-sizing: border-box;
-    border: 1px solid lightgray;
-    border-radius: 0.75em;
-    transition: 0.3s;
-  }
-  input:checked + span {
-    background: black;
-  }
-  input {
-    position: absolute;
-    opacity: 0;
-    width: 1em;
-  }
-  input + span::after {
-    content: '';
-    display: block;
-    height: 1.2em;
-    width: 1.2em;
-    border-radius: 50%;
-    background: gray;
-    transition: 0.3s;
-  }
-  input:checked + span::after {
-    background: green;
-    transform: translate(100%);
-  }
-  input:focus + span {
-    border: 1px solid cornflowerblue;
-  }
-</style>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index d4ec188..eb86be4 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -9,7 +9,6 @@ export { default as Icon } from './Icon.svelte'
 export { default, default as PeriodicTable } from './PeriodicTable.svelte'
 export { default as ScatterPlot } from './ScatterPlot.svelte'
 export { default as TableInset } from './TableInset.svelte'
-export { default as Toggle } from './Toggle.svelte'
 
 export type Category =
   | `actinide`
diff --git a/src/routes/(demos)/bohr-atoms/+page@.svelte b/src/routes/(demos)/bohr-atoms/+page.svelte
similarity index 97%
rename from src/routes/(demos)/bohr-atoms/+page@.svelte
rename to src/routes/(demos)/bohr-atoms/+page.svelte
index c199971..232e79f 100644
--- a/src/routes/(demos)/bohr-atoms/+page@.svelte
+++ b/src/routes/(demos)/bohr-atoms/+page.svelte
@@ -51,6 +51,7 @@
     flex-wrap: wrap;
     place-content: center;
     padding: 0;
+    margin: 0 calc((-95vw + 100cqw) / 2);
   }
   li {
     display: inline-block;
diff --git a/src/routes/(demos)/color-scales/+page.svx b/src/routes/(demos)/color-scales/+page.svx
index bcc004e..411403d 100644
--- a/src/routes/(demos)/color-scales/+page.svx
+++ b/src/routes/(demos)/color-scales/+page.svx
@@ -1,4 +1,4 @@
-<label for="color-map">Enter a custom color map in the text area below and see the heatmap update in real time (if it's valid JSON)</label>
+<label for="color-map">Enter a custom color map in the text area below and see the heatmap update in real-time (if it's valid JSON and valid CSS color codes).</label>
 
 ```svelte example stackblitz code_above
 <script>
@@ -22,7 +22,8 @@
 
 ```svelte example stackblitz code_above
 <script>
-  import { PeriodicTable, TableInset, Toggle } from '$lib'
+  import { Toggle } from 'svelte-zoo'
+  import { PeriodicTable, TableInset } from '$lib'
   import { pretty_num } from '$lib/labels'
   import mp_elem_counts from './mp-element-counts.json'
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f9065fe..0fde904 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -39,7 +39,7 @@
 <PeriodicTable
   tile_props={{ show_name: window_width > 1000 }}
   heatmap_values={$heatmap_key ? element_data.map((el) => el[$heatmap_key]) : []}
-  style="margin: 2em auto 4em;"
+  style="margin: 2em auto 4em; max-width: 85vw;"
   bind:color_scale
   bind:active_element={$active_element}
   bind:active_category={$active_category}
diff --git a/src/site/Footer.svelte b/src/site/Footer.svelte
index d23061c..db1c739 100644
--- a/src/site/Footer.svelte
+++ b/src/site/Footer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Toggle } from '$lib'
   import Icon from '$lib/Icon.svelte'
   import { show_icons } from '$lib/stores'
   import { repository } from '$root/package.json'
+  import { Toggle } from 'svelte-zoo'
 </script>
 
 <footer>
diff --git a/tests/periodic-table.test.ts b/tests/periodic-table.test.ts
index 8157446..2b132b3 100644
--- a/tests/periodic-table.test.ts
+++ b/tests/periodic-table.test.ts
@@ -1,7 +1,11 @@
-import { category_counts } from '$lib/labels'
 import { expect, test } from '@playwright/test'
 import element_data from '../src/lib/element-data.ts'
-import { heatmap_keys, heatmap_labels, pretty_num } from '../src/lib/labels.ts'
+import {
+  category_counts,
+  heatmap_keys,
+  heatmap_labels,
+  pretty_num,
+} from '../src/lib/labels.ts'
 
 test.describe(`Periodic Table`, () => {
   test(`in default state`, async ({ page }) => {