Case studies: Redesign main page

[ericronne]

It might help clarify site structure if we bring the case studies main page into line with all of the other "level two" pages stylistically (and navigationally), applying the wide blue bar design.

I'm onnit...

cc @meiqimichelle @coreycaitlin @gemfarmer @shawnbot @usEITI

[ericronne]

Draft, inspired by the explore data / national page

*If all think this is worth trying, i will design a mouseover state for the round buttons, showing the name of the case study and commodity.

[meiqimichelle]

@ericronne Nice! I like getting the case studies back in line with the 'blue bar' look on the other pages. Is there something that might distinguish the 'blue states that are clickable' on the 'explore data' section versus this page, which has the same blue states but I'm assuming only the round buttons are clickable? Or! Likely! You were getting there, but it didn't make sense to redesign the map until we'd had a chance to 👍 or 👎 to the idea generally.

[ericronne]

@meiqimichelle you mean this!...

[meiqimichelle]

💥

[ericronne]

Hovernotion...

[ericronne]

@coreycaitlin &c note that i rearranged the name, to prioritize both the commodity and state. That work?

[meiqimichelle]

Over to me for implementation

[meiqimichelle]

@ericronne We needs icons! Any change you can make svgs for each one of those dots and link us up?

[gemfarmer]

TODOS

• add ribbon layout to top of page
• create SVG layer for "points of interest" to add to map
• create tool tip

[ericronne]

@meiqimichelle yes.

[ericronne]

SVG files for the circle icons are right here.

Included reversed ones for hover (but may end up replacing those later if they don't look right, they were created with haste). I won't be surprised if some of these misbehave, so just let me know.

[meiqimichelle]

This is partially implemented already. Remaining: tooltips!

[ericronne]

Here's a simplified iron icon, which will hopefully fix the rendering issue.

[meiqimichelle]

@ericronne the simplified icon is coming through like this (not the gray and black, the cut-off icon):

[ericronne]

@meiqimichelle hopefully this reversed-out iron icon svg will work!

[ericronne]

@meiqimichelle and here is another pass at the gold svg and the reversed version to boot

[ericronne]

@meiqimichelle ok how about this one and this one?

[meiqimichelle]

@ericronne Better, still slightly slightly slightly off, but perhaps very much close enough: