diff --git a/src/app.css b/src/app.css
index 3f0f415..ab324a3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,7 +3,7 @@
}
body {
background: var(--page-bg);
- padding: 4em;
+ padding: 2vw 6vw;
font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
margin: auto;
color: #eee;
diff --git a/src/app.html b/src/app.html
index 28a1153..4d98c23 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,15 +1,19 @@
- Periodic Table
+
+
+
+
+
+
+
-
-
-
+
@@ -18,15 +22,6 @@
-
-
%sveltekit.body%
diff --git a/src/routes/[slug].svelte b/src/routes/[slug].svelte
index e3884b6..27124f6 100644
--- a/src/routes/[slug].svelte
+++ b/src/routes/[slug].svelte
@@ -20,18 +20,29 @@
// set atomic radius as initial heatmap
const initial_heatmap = Object.keys(heatmap_labels)[1] as keyof ChemicalElement
+
+ $: head_title = `${element.name} | Periodic Table`
+
+ {head_title}
+
+
+
{element.name}
{element.category}
-
+
+
+
+{#if element.summary}
+ {@html element.summary}
+{/if}
{#each key_vals as [label, value]}
@@ -52,12 +63,18 @@
font-weight: lighter;
opacity: 0.7;
}
- main {
+ section {
margin: 2em 0;
display: grid;
gap: 2em;
grid-template-columns: 1fr 2fr;
}
+ p.description {
+ text-align: center;
+ opacity: 0.9;
+ margin: 3em auto;
+ max-width: 50em;
+ }
div.properties {
display: grid;
grid-gap: 3em;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 65c3124..9668cf0 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -12,6 +12,11 @@
let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none`
+
+ Periodic Table
+
+
+
Periodic Table of Elements