Make list.html look more like mockups.

[toolness]

This is a work-in-progress (WIP), please don't merge it yet!

This attempts to fix #6 and #7, though I might end up trying to fix #13 too.

Notes:

• I'm concerned the "as featured in" blurb in the mockup is too light to meet the minimum 4.5:1 contrast ratio for WCAG AA, so I'm making it a bit darker. But that also makes it stand out more, and potentially conflict with the prominence of the other visual elements on the page.

• This reads nicely visually but I'm not sure how understandable it will be on screen readers, I guess we can deal with that later though.

To do:

Some or all of these can be punted to later issues/PRs.

• [x] Add jess's head next to "Hi, I'm Jess Klein" and put "Hi, I'm Jess Klein" in a dialogue word bubble type thing, so it looks like Jess' head is talking. Filed as #18.
• [x] Add per-project core value highlight colors to the list page.
• [x] Add per-project core value highlight colors to the detail pages.
• [x] Add a highlight color for "maker" in the "jessklein.is a maker" top-level header.
• [x] Add logos for the media outlets (Atlantic, NY Times, etc). Filed as #19.
• [x] Ensure that the dynamic background highlights resize when CSS fonts are loaded and/or other kinds of load events occur.

[toolness]

There seem to be differences in the way figma renders colors vs. the way a standalone webpage does, which is weird. Even though I'm putting the exact same color codes in for the highlights, they appear darker on the standalone page than they do in the mockups, which makes the text in front of them harder to read.

For now I'm setting them as RGBA values so it's easy to tweak their lightness by just adjusting the alpha channel.

[toolness]

Ok I think I'm gonna have to do the "messy" background highlight (#13) using javascript.

i'm jess playin around now but here's what i've got so far:

[iamjessklein]

I kinda like this mess that you made - also that's weird re: figma colors, I'm going to look it up. Maybe it's a setting I missed