Implement section divider ui alignment

[kristinashu]

From alignment work in mozilla/network#582 and to align better with new brand, mozilla.org, Network site, and IRH sites.

Comp https://redpen.io/ygc29beb3e61e39afb

Update dashed divider to gradient + highlight text. Note that sometimes the divider is gradient + highlight text and sometimes it is only the highlight text (no gradient)(example).

• gradient colors are same as header banner (from #3DFEFD to #B7D43F), 4px in height
• 30px vertical space between gradient and text
• text is Zilla Slab Highlight 25px with 40px of black before text starts

Related to Pulse nav update https://github.com/mozilla/network-pulse/issues/731

cc @gvn

[kristinashu]

Sweet! Looks good except the dividers at top of the Landing page and also the Upcoming page look a little too close to the banner image.

Example:

Please increase the the gap from what I think is 30px to 50px.

Padding on all the other dividers (example: 'Network Leaders' and 'Get Involved' lower down on the Landing page) look good.

[kristinashu]

Sorry, one more thing... can you add the selected state? So if I'm on the projects page then "Projects" should be underlined (like the hover state). It seems to be there on narrow screens but not desktop.

[gvn]

Changes are up on staging to verify: https://network.mofostaging.net/

[kristinashu]

Awesome!