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
Norian
Carnian
Middle
Ladinian
Anisian
Lower
Olenekian
Induan
Paleozoic
Permian
Lopingian
Changhsingian
Wuchiapingian
Guadalupian
Capitanian
Wordian
Roadian
Cisuralian
Kungurian
Artinskian
Sakmarian
Asselian
Carboniferous
Pennsylvanian
Upper
Gzhelian
Kasimovian
Middle
Moscovian
Lower
Bashkirian
Mississippian
Upper
Serpukhovian
Middle
Visean
Lower
Tournaisian
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