Features/new hero header #163409640

[jrubenoff]

Tested in Firefox, desktop Safari, Chrome, Edge 18, and iPhone 8 Safari.

List of changes

Pattern library

• Rename "hero header" to "splash header", since our only "hero header" is wrapped in a .splash-header class
• Move splash header to molecules, alongside the other headers
• Add a "lead header image" example component, since most of our lead headers have background images

Design

• Redesign splash header
• Restyle lead header to match splash header

Code

• Replace sf-homes-wide.jpg with new background image
• Remove .bg-gradient styles for .splash-header and .lead-header. None of these components in Web or Partners use .bg-gradient without .bg-image, and the new dark background image removes the need for this class
• Add responsive bg-image mixin to display smaller images on smaller screens
• Add mega and giga type sizes for homepage banners and directory headers
• [Unrelated] Fix comments in _type.scss with incorrect sizes

[akegan]

@jrubenoff I started looking into your grunt:replace issue but it looks like we don't have any documentation anywhere about how to update the pattern library! @chrisdolendo can you help look into that issue too (see "Bug" in PR description)? and can we add instructions to the readme for whatever we figure out?

[jrubenoff]

I resolved the grunt issue and updated the README earlier today! (See this comment.)