Refine background for local nav & query title banner

[iandunn]

#63 simplified how the local nav bar background/strokes work, so that we don't have to manually create new images for every screen that has a unique color.

It works, but still needs some iteration:

• When the category list is toggled on, the mask covers the names of some categories, making them hard to read. mask-size: cover is probably to blame, but I couldn't find a way to change that and still get the desired effect when the category list is closed.
• at some breakpoints, the left/right edges don't look close to the mockup

The solution might be to replace mask-image with a background-image that's the inverse of the current one, like originally discussed in #62 (comment)

It might also be worth considering multiple background images again, but in a way that doesn't require the duplicate images. Like one for the bottom tear, and one for the left/right edge tears. Or maybe combining a background image with a mask image. If 2 images are used, it might help to apply one to nav.local-header and the other to div.local-header__navigation

See #41 for details about the original implementation.

Related: #69, #84

[tellyworth]

@kellychoffman and @jeffikus here's another that you might be able to help with.

[MaggieCabrera]

I'm having a look at this, @tellyworth @iandunn do you think you can add me to the repo so I don't have to fork it?

[iandunn]

Thanks! You should have access now ✅

[kellychoffman]

This feels more code than design, but @beafialho and I are available to review any proposed solution(s).