Activity icons used inconsistently

[jugglinmike]

The "Pizza Productivity" icon is used on the project's landing page and re-used
in the heading within the activity UI itself:

All other activities are rendered without their associated icon from the
landing page. For example, from "The Supply and Demand of Cocoa":

@iamjessklein did some excellent work with this iconography; we should make
sure they are consistently in the activity headers!

[jugglinmike]

The obvious answer here is to simply place each activity's icons within each
header as it exists today:

...but I've been thinking that the landing page establishes a vibrant color
palette, and it is a shame we don't see that reflected elsewhere:

So an alternative that might be nice would be to associate each activity with a
certain color, and consistently use that in the presentation of that activity
(e.g. from both the landing page and the activity page). In the case of "The
Supply and Demand of Cocoa", that would look something like this:

...but of course, the "Pizza Productivity" page would not change, as it is
currently displayed with the teal background by default.

This might degrade from the cohesion of the design somewhat, but there's
precedence here: the landing page's heading is green, while the activity pages'
headings are teal.

@cbujara what do you think?

[cbujara]

I love the idea of adding the icon to the banner, and using the background color of the icon for the banner color. We may need to alter the text color for visibility for some of the darker colors. This would be a nice value-add on top of the other fixes/tweaks.

[jugglinmike]

@cbujara Yup, readability is definitely something we'd have to explicitly account for. I'll keep this feature in mind as I get through the higher-priority work.