reduce max-width landing page ptable, negative margins on bohr atom d…

…emo, replace Toggle with svelte-zoo's Toggle

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",

src/app.css

@@ -41,6 +41,7 @@ main {
   margin-bottom: 3em;
   width: 100%;
   max-width: 50em;
+  container-type: inline-size;
 }
 a {
   color: cornflowerblue;

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`

src/routes/(demos)/bohr-atoms/+page@.svelte → 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;

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'
 

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}

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>

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 }) => {