add a legend to the <aside> to explain what different colors mean

this is confusing at first glance, says @ahwolf