Geologic Timescale with CSS Grid

I was looking for an excuse to learn a little CSS grid and thought the Geologic Timescale might be an interesting challenge.

Note that this was purely a learning exercise and as a result it is not at all accessible in terms of describing the data hierarchically. We can determine the hierarchy visually but a screen reader would not convey this information to a user; that is an exercise for another day.

The solution is available on CodePen should you wish to see my approach.

The colour palettes and data for geological time were found here.

Geologic Timescale

Phanerozoic

Cenozoic

Quaternary

Holocene

Pleistocene

Upper

Ionian

Calabrian

Gelasian

Neogene

Pliocene

Piacenzian

Zanclean

Tortonian

Miocene

Messinian

Tortonian

Serravallian

Langhian

Burdigalian

Aquitanian

Paleogene

Oligocene

Chattian

Rupelian

Eocene

Priabonian

Bartonian

Lutetian

Ypresian

Paleocene

Thanetian

Selandian

Danian

Mesozoic

Cretaceous

Upper

Maastrichtian

Campanian

Santonian

Coniacian

Turonian

Cenomanian

Lower

Albian

Aptian

Barremian

Hauterivian

Valanginian

Berriasian

Jurassic

Upper

Tithonian

Kimmeridgian

Oxfordian

Middle

Callovian

Bathonian

Bajocian

Aalenian

Lower

Toarcian

Pliensbachian

Sinemurian

Hettangian

Triassic

Upper

Rhaetian

child

child

Middle

Ladinian

Anisian

Lower

Olenekian

Induan

Paleozoic

Permian

Lopingian

Changhsingian

Wuchiapingian

Guadalupian

Capitanian

Wordian

Roadian

Cisuralian

Kungurian

Artinskian

Sakmarian

Asselian

Devonian

Upper

Famennian

Frasnian

Middle

Givetian

Eifelian

Lower

Emsian

Pragian

Lochkovian

Silurian

Pridoli

Pridoli

Ludlow

Ludfordian

Gorstian

Wenlock

Homerian

Sheinwoodian

Llandovery

Telychian

Aeronian

Rhuddanian

Ordovician

Upper

Hirnantian

Katian

Sandbian

Middle

Darriwilian

Dapingian

Lower

Floian

Tremadocian

Cambrian

Furongian

Stage 10

Jiangshanian

Paibian

Series 3

Guzhangian

Drumian

Stage 5

Series 2

Stage 4

Stage 3

Terreneuvian

Stage 2

Fortunian

Precambrian

Proterozoic

Neoproterozoic

Ediacaran

Cryogenian

Tonian

Mesoproterozoic

Stenian

Ectasian

Calymmia

Paleoproterozoic

Statherian

Orosirian

Rhyacian

Siderian

Archaen

Neoarchean

Mesoarchean

Paleoarchean

Eoarchean