diff --git a/readme.md b/readme.md index 373a6d7..b3e0361 100644 --- a/readme.md +++ b/readme.md @@ -3,7 +3,7 @@ [![Netlify Status](https://api.netlify.com/api/v1/badges/42b5fd04-c538-4e3c-bd69-73e383989cfd/deploy-status)](https://app.netlify.com/sites/ptable-elements/deploys) [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/periodic-table/main.svg?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)](https://results.pre-commit.ci/latest/github/janosh/periodic-table/main?badge_token=nUqJfPCFS4uyMwcFSDIfdQ) -A dynamic Periodic Table component written in Svelte. +Interactive Periodic Table component written in Svelte. ![Screenshot of periodic table](static/2022-06-01-screenshot.png) diff --git a/src/colors.ts b/src/colors.ts index 70b9500..13e8b6a 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -1,4 +1,4 @@ -export const category_colors: Record = { +export const default_category_colors: Record = { 'diatomic-nonmetal': `#ff8c00`, // darkorange 'noble-gas': `#9932cc`, // darkorchid 'alkali-metal': `#006400`, // darkgreen @@ -11,3 +11,6 @@ export const category_colors: Record = { actinide: `#6495ed`, // cornflowerblue experimental: `#808080`, // gray } +export const category_colors: Record = { + ...default_category_colors, +} diff --git a/src/lib/ColorCustomizer.svelte b/src/lib/ColorCustomizer.svelte index a9f9c72..a8e2bb2 100644 --- a/src/lib/ColorCustomizer.svelte +++ b/src/lib/ColorCustomizer.svelte @@ -1,6 +1,6 @@ +

(open = !open)} + title={!open && collapsible ? `Click to open color picker` : null} + style:cursor={collapsible ? `pointer` : `default`} +> + Customize Colors +

-

(open = !open)} - title={!open && collapsible ? `Click to open color picker` : null} - style:cursor={collapsible ? `pointer` : `default`} - > - Customize Colors -

{#if open || !collapsible} {#each Object.keys(category_colors) as category} {/each} {/if} @@ -68,7 +76,16 @@ cursor: pointer; } h2 { - margin: 0; - white-space: nowrap; + text-align: center; + } + label > button { + background: none; + border: none; + color: white; + opacity: 0; + transition: 0.3s; + } + label:hover > button { + opacity: 0.5; } diff --git a/src/lib/ElementTile.svelte b/src/lib/ElementTile.svelte index 7fd6034..3fa6254 100644 --- a/src/lib/ElementTile.svelte +++ b/src/lib/ElementTile.svelte @@ -3,7 +3,7 @@ import { Element } from '../types' export let element: Element - export let bg_color: string + export let bg_color: string | null export let style = `` export let show_number = true export let show_name = true @@ -11,12 +11,13 @@ export let precision = 2 $: category = element.category.replaceAll(` `, `-`) + // background color defaults to category color (initialized in colors.ts, user editable in ColorCustomizer.ts) + $: bg_color = bg_color ?? `var(--${category}-bg-color)`
diff --git a/src/lib/PeriodicTable.svelte b/src/lib/PeriodicTable.svelte index bf08148..73d296b 100644 --- a/src/lib/PeriodicTable.svelte +++ b/src/lib/PeriodicTable.svelte @@ -1,5 +1,4 @@