Updating theming

[gvn]

Related to: #495

[gvn]

The header. It's busted in Firefox (Mozilla logo doesn't show up- that old SVG issue?) It also seems a bit tall, but I could be wrong on that.

~It isn't for me locally, so that's odd. I took dimensions from Sketch. I'll investigate...~

Logo should be fixed now...

The header covers the background images in a way that I don't think it's supposed to on desktop views. Might want to ping @beccaklam for how to solve that.

@beccaklam can you look at the staged PR and let me know what needs tweaking?

Hitting the menu button still shows the red images.

I was planning on doing the menu in another PR since it's another ticket and I didn't want to make this one too huge.

[alanmoo]

For the separate PR, that makes sense, but we can't land this on master without having the menu updated. If you want to open this PR against a new branch and slowly land on that before a bigger merge, I'd be fine landing it

[gvn]

Ok I guess I will work against a new feature branch. Really just trying to keep this easier for reviewers...

[alanmoo]

PRs against a new branch will keep it easy. This site just deploys too frequently to risk anything half-built being on master. (Part of the reason its monstrous nature is unmaintainable long term)

[gvn]

K...made a new feature branch pni-refresh

[beccaklam]

@gvn Sorry for the late reply. Looking at the header/background image cut off now and trying to see how we can fix it. Will reply after my lunch! cc: @alanmoo

[beccaklam]

@gvn @alanmoo Changing background-attachment from 'fixed' to 'local' seems to fix the weird cut off problem:

.buyers-guide-home .categories-container .home-category-container .category-bottom .image-container { background-attachment: local; }

[beccaklam]

Also, can we make these changes to tighten up the spacing in the header? @gvn

.buyers-guide-header-container { padding: 0 25px; }

.buyers-guide-header-container .bg-subhead { padding: 0 20px 25px; }

.buyers-guide-header-container .bg-subhead p { margin: 0; }

[beccaklam]

And I'm not sure what's affecting the alignment for the category headers right now but they seem to jump around. Would we be able to align them to the Mozilla logo? See the red line: @gvn

[beccaklam]

@gvn Lastly, can we change to the font family of 'privacy not included' to Zilla Slab and add an asterisk in front of privacy? Sorry I forgot to add that in the designs.

.buyers-guide-header-container .buyers-guide-header { font-family: "Zilla Slab", serif; }

[beccaklam]

@gvn The changes look great! Sorry ... but could we do two more little css changes? Can we increase the padding for the buttons just a wee bit? So instead of padding: 10px 15px; it would be padding: 15px 20px; and can we set the max-width for .buyers-guide-home h2.playfair to be 400px instead of 450px? Please and thank you in advance!

[beccaklam]

@gvn @alanmoo One more thing are we making css changes to the following in another ticket?

Hoping for something more like this:

If it's easier ... I can also make these changes. I have the repo locally on my computer, I think.

[gvn]

Made those changes.

[beccaklam]

@gvn Thanks Gavin, looks great. The only thing that still looks off is the paragraph in the grey box and mozilla.org in the footer, there's some crazy letter-spacing happening there. Can we make sure it's letter-spacing: 0; ? Please and thanks! Otherwise the landing page looks done for now.

[beccaklam]

@gvn Just saw the changes. Thank you. Looks good to go!