remove EasterEgg.svelte from landing page

janosh · Feb 13, 2023 · 686c904 · 686c904
1 parent aa6b503
commit 686c904
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 76 deletions.
diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
@@ -19,7 +19,7 @@
   export let on_hover_point: ((point: PlotPoint) => void) | null = null
   export let x_label = `Atomic Number`
   export let x_label_y = 0
-  export let color_scale: ScaleLinear<number, number, never> | null = null
+  export let color_scale: ScaleLinear<number, string, never> | null = null
   // either array of length 118 (one heat value for each element) or object with
   // element symbol as key and heat value as value
   export let y_values: number[]

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -8,16 +8,11 @@
   import ScatterPlot from '$lib/ScatterPlot.svelte'
   import { active_category, active_element, heatmap_key, last_element } from '$lib/stores'
   import TableInset from '$lib/TableInset.svelte'
-  import EasterEgg from '$site/EasterEgg.svelte'
   import PropertySelect from '$site/PropertySelect.svelte'
   import type { ScaleLinear } from 'd3-scale'
-  import '../app.css'
 
   let window_width: number
-  let color_scale: ScaleLinear<number, number, never>
-  let x_angle = 0
-  let y_angle = 0
-  let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none`
+  let color_scale: ScaleLinear<number, string, never>
 
   $: [y_label, y_unit] = property_labels[$heatmap_key] ?? []
 </script>
@@ -33,83 +28,50 @@
 
 <PropertySelect />
 
-<div
-  style:transform="rotateX({x_angle}deg) rotateY({y_angle}deg)"
-  class="auto-rotate-{auto_rotate}"
+{#if $last_element && window_width > 1100}
+  {@const { shells, name, symbol } = $last_element}
+  <a href="bohr-atoms">
+    <BohrAtom {shells} name="Bohr Model of {name}" {symbol} style="width: 250px" />
+  </a>
+{/if}
+<PeriodicTable
+  show_names={window_width > 1000}
+  heatmap_values={$heatmap_key ? element_data.map((el) => el[$heatmap_key]) : []}
+  style="margin: 2em auto 4em;"
+  bind:color_scale
+  bind:active_element={$active_element}
+  bind:active_category={$active_category}
+  links="name"
 >
-  {#if $last_element && window_width > 1100}
-    {@const { shells, name, symbol } = $last_element}
-    <a href="bohr-atoms">
-      <BohrAtom {shells} name="Bohr Model of {name}" {symbol} style="width: 250px" />
-    </a>
-  {/if}
-  <PeriodicTable
-    show_names={window_width > 1000}
-    heatmap_values={$heatmap_key ? element_data.map((el) => el[$heatmap_key]) : []}
-    style="margin: 2em auto 4em;"
-    bind:color_scale
-    bind:active_element={$active_element}
-    bind:active_category={$active_category}
-    links="name"
-  >
-    <TableInset slot="inset">
-      {#if $heatmap_key}
-        <ScatterPlot
-          y_lim={[0, null]}
-          y_values={element_data.map((el) => el[$heatmap_key])}
-          {y_label}
-          {y_unit}
-          on_hover_point={(point) => ($active_element = point[2])}
-          x_label_y={42}
-          {color_scale}
-        />
-      {:else}
-        <ElementStats --font-size="1vw" element={$last_element} />
-      {/if}
-    </TableInset>
-  </PeriodicTable>
+  <TableInset slot="inset">
+    {#if $heatmap_key}
+      <ScatterPlot
+        y_lim={[0, null]}
+        y_values={element_data.map((el) => el[$heatmap_key])}
+        {y_label}
+        {y_unit}
+        on_hover_point={(point) => ($active_element = point[2])}
+        x_label_y={42}
+        {color_scale}
+      />
+    {:else}
+      <ElementStats --font-size="1vw" element={$last_element} />
+    {/if}
+  </TableInset>
+</PeriodicTable>
 
-  {#if !$heatmap_key}
-    <ColorCustomizer collapsible={false} />
-  {/if}
-</div>
-
-<EasterEgg bind:x_angle bind:y_angle bind:auto_rotate />
+{#if !$heatmap_key}
+  <ColorCustomizer collapsible={false} />
+{/if}
 
 <style>
   h1 {
     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;
-  }
-  div.auto-rotate-y {
-    animation: spin-y 30s linear infinite;
-  }
-  div.auto-rotate-both {
-    animation: spin-both 30s linear infinite;
-  }
-  @keyframes spin-x {
-    100% {
-      transform: rotateX(360deg);
-    }
-  }
-  @keyframes spin-y {
-    100% {
-      transform: rotateY(360deg);
-    }
-  }
-  @keyframes spin-both {
-    100% {
-      transform: rotateX(360deg) rotateY(360deg);
-    }
+    font-size: clamp(20pt, 5.5vw, 42pt);
   }
   a[href='bohr-atoms'] {
     position: absolute;
-    bottom: 93%;
-    right: 8%;
+    top: 8%;
+    right: 10%;
   }
 </style>