Nucleus
- H
- He
- Li
- Be
- B
- C
- N
- O
- F
- Ne
- Na
- Mg
- Al
- Si
- P
- S
- Cl
- Ar
- K
- Ca
- Sc
- Ti
- V
- Cr
- Mn
- Fe
- Co
- Ni
- Cu
- Zn
- Ga
- Ge
- As
- Se
- Br
- Kr
- Rb
- Sr
- Y
- Zr
- Nb
- Mo
- Tc
- Ru
- Rh
- Pd
- Ag
- Cd
- In
- Sn
- Sb
- Te
- I
- Xe
- Cs
- Ba
- La
- Ce
- Pr
- Nd
- Pm
- Sm
- Eu
- Gd
- Tb
- Dy
- Ho
- Er
- Tm
- Yb
- Lu
- Hf
- Ta
- W
- Re
- Os
- Ir
- Pt
- Au
- Hg
- Tl
- Pb
- Bi
- Po
- At
- Rn
- Fr
- Ra
- Ac
- Th
- Pa
- U
- Np
- Pu
- Am
- Cm
- Bk
- Cf
- Es
- Fm
- Md
- No
- Lr
- Rf
- Db
- Sg
- Bh
- Hs
- Mt
- Ds
- Rg
- Cn
- Nh
- Fl
- Mc
- Lv
- Ts
- Og
svelte<script lang="ts">
import { element_data, Nucleus } from 'matterviz'
</script>
<ul>
{#each element_data as { protons, neutrons, symbol, name } (symbol)}
<li>
<a href="/{name.toLowerCase()}">{symbol}</a>
<Nucleus {protons} {neutrons} />
</li>
{/each}
</ul>
<style>
ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 2em;
margin: 2em 0;
padding: 0;
}
ul > li {
position: relative;
}
ul > li > a {
position: absolute;
top: -1em;
color: var(--color-text);
}
</style>