Adding new PNI nav

[gvn]

related to #497

[gvn]

@beccaklam Can you give this a design review?

https://advocacy-mozilla-org-st-pr-504.herokuapp.com/en-US/privacynotincluded/

[beccaklam]

Yes! @gvn sorry I saw it this morning but got distracted. Will get on it right away.

[beccaklam]

@gvn: So some quick feedback:

• [x] We should use the white mozilla logo for the menu:

• [x] Can we center the menu content? And add a margin-bottom of somewhere around 5-10px for each div.link-container?

  

• [x] This is sort of unrelated but related to the landing page -- We need more padding on the left and right sides of the page, can we change:

.buyers-guide-header-container { padding: 20px 45px; to padding: 20px 60px 24px }

and (actually not sure if this is the right selector but see image below)

.buyers-guide-home .categories-container .home-category-container .category-top { padding: 0 45px to padding: 0 60px }

[gvn]

@beccaklam Ok, made some of those tweaks. I'm not sure what you mean by centering the menu content exactly.

Do you mean setting a max-width on the container or vertically centering it in the viewport? The comps look left aligned...

[beccaklam]

@gvn Oh sorry I just meant centering the content. Setting the div that holds menu content to

margin: auto 0;

seems to do it.

[beccaklam]

^ also I am still seeing a black logo @gvn am I using a wrong staging link?

[gvn]

You may have an older version cached. Try holding shift and clicking refresh.

So this is really what you want? Looks odd to me:

[beccaklam]

@gvn haha it's switched around:

margin: auto 0;

instead of

margin: 0 auto;

[beccaklam]

@gvn also shift+refresh did not work. it's also still black in your last screen cap? i'm talking about the Mozilla logo in the full screen menu

[gvn]

Ok, the filter wasn't working properly x-browser, but should be fixed now. I also tweaked the margin.

https://advocacy-mozilla-org-st-pr-504.herokuapp.com/en-US/privacynotincluded/

[beccaklam]

@gvn Mobile view is looking good but needs some tightening up: Current state:

• [x] The favicon should be reversed -- white text on black square (see comps)

• [x] privacy not included should be left aligned with the asterisk sitting outside like so (not sure how you would do this in code but if you need an svg or png I can export one for you):

[gvn]

Made those tweaks...

[beccaklam]

@gvn thank you! Sorry I found some more tweaks which relate more to ticket #495 I forgot to QA the mobile view which is my bad, this comment basically refers to the "tightening up for small screens" @alanmoo mentioned. So for all these changes I'm thinking they're for a media query that deals with any screen width less than 500px? (Also let me know if you would prefer this in another ticket)

• [x] Can we make sure 'not included' sits below 'privacy?' like this:

  

• The social buttons in mobile feel too big and spaced out. For the class "social-button" can we:

• [x] margin: 0; instead of margin: 0 5px;

• [x] change font-size from 20px to 16px

• [x] Except for the twitter icon which should be 19px to keep its size consistent with the other icons

• For the class "bg-subhead" can we:

• [x] Make it a max-width of 250px

• [x] font-size: 23px

• [x] padding-top: 13px instead of 10px

• The category images with the way the text/button sit are way janky right now (sorry I neglected to include a mobile mock up), these changes should make it better though:

• [x] for class "image-container" change to background-position: left instead of center

• for selector ".buyers-guide-home h2.playfair" do

• [x] max-width: 250px instead of 400px

• [x] add line-height: 28px

• for selector ".buyers-guide-home .categories-container .home-category-container .category-top a p" change to

• [x] font-size: 11px

• [x] letter-spacing: 1.75px

• [x] padding: 10px 12px;

[beccaklam]

@gvn One more menu design QA: Can we shift the X over to where I've drawn the red X in the following image:

[gvn]

Ok, tweaks made. @beccaklam can you take another look at staging?

[beccaklam]

@gvn Just looked. Soooo much better. Sorry I made a mistake:

• [x] For the class "bg-subhead", font-size should be 12px not 23px for the mobile media query

[gvn]

K...yeah, thought that looked weird.

[beccaklam]

@gvn and

• [x] *privacy not included can be one line on desktop screens like before (just want mobile stacked):

  

• For mobile screens can we

• [ ] change the font size of *privacy not included to 16px and the line-height to 16.75px;

After that we should be good to ship! Thank you so much 💯

[gvn]

Ok, I removed the forced break between "privacy" and "not included".

I added an additional breakpoint below 400px to reduce to 12px because it was getting really crowded at 16px.

[beccaklam]

@gvn Design QA:

P1

Universal

• [x] We want to get rid of the Playfair typeface entirely. Can you replace all Playfair instances with Zilla Slab?

• Menu on Product Pages (this relates to the above)

• [x] change Playfair font to Open Sans

P2

Universal

• [x] change “ *privacy not included” font-weight from 900 to 400;

Mobile

• All Pages
• [ ] “ *privacy not included ” should be stacked (with “not included” under “privacy”) BUT ONLY on mobile

Tablet/Desktop

• [x] Twitter icon font-size at tablet and desktop views should be at 24px to keep it consistent with the other social media icons (for some reason it’s just smaller than the other icons and that makes it look off) - P2

P3

Mobile

• Product Page
• [x] Can we change the related products divs to percentages so that they’re responsive? It looks strange that they’re stacked off to the left side. So somthing like this, you can play around with the numbers to see what works best:

[gvn]

Ok, made those changes minus the stacking of the logo text because I think that should adapt to the width of its parent container size instead of a breakpoint if we leave it as live responsive typography.

Alternatively, we can rasterize it as SVG in two different layouts, but that's going to be a pain for localization as new assets will need to be generated for every language.

[alanmoo]

Merging, Rebecca will create a new ticket with remaining QA items.