Replace pebbles basic tempalate with protocol article template

[stephaniehobson]

Description

• Add .mzp-t-mozilla where appropriate
• Edit and rename base-pebbles-basic to base-article
• Convert page specific .less files to .scss files
• Convert page specific .scss files to use Protocol not Pebbles
• Change classnames from prose to mzp-u-list-styled
• Change classnames from data-table to mzp-u-data-table
• Remove unused styles
• Tweak page styles as needed

Issue / Bugzilla link

#6822

Testing

• http://localhost:8000/en-US/about/governance/*
• http://localhost:8000/en-US/about/forums/*
• http://localhost:8000/en-US/about/manifesto/details/
• http://localhost:8000/en-US/about/policy/patents/*
• http://localhost:8000/en-US/security/*
• http://localhost:8000/credits/faq/
• pages with <details>:
  • http://localhost:8000/en-US/security/bug-bounty/hall-of-fame/
  • http://localhost:8000/en-US/about/policy/patents/

[stephaniehobson]

This is ready for review now.

Note that I have left the firefox-enterprise style sheet in Pebbles because I'm working on the enterprise section of the site next week.

[stephaniehobson]

This is blocking my work updating the Enterprise section. Upping the priority level of the review.

[stephaniehobson]

Nits picked ✅

Thanks @pdehaan

[stephaniehobson]

Upping the size of this review after talking to @craigcook

[alexgibson]

This touches a lot of pages, not all of which I've gone through manually yet - but I took a first pass. Generally things look good, although I noted some potential UI issues. Some things still feel a little rough around the edges in places.

There's also an issue with the newsletter JS throwing errors, and the side menu is missing some JS to make it functional.

[stephaniehobson]

Well darn, I don't have enough information to populate the mobile version of the side menu and the component is not flexible enough to work without it. I'm going to mark this as blocked and remove the review priority while I think about how to handle this.

[stephaniehobson]

Also blocked by mozilla/protocol#402 and a new version of Protocol.

[stephaniehobson]

Unblocked. Turns out we have the word "Menu" in main.lang! And this update now includes Protocol 7.0.2 with half the fix to the newsletter related js error.

Also, I lost a bike shedding argument with myself and changed the name space from "basic" to "article" as I thought was was more descriptive and easier to differentiate from "base".

Still waiting on:

• make the newsletter image smaller
• lighten the background colour of side menu on mobile.

[stephaniehobson]

Okay, ready for re-review.

[craigcook]

On some pages the mzp-c-article is overflowing its mzp-l-main container, but I can't understand why when it has no declared width. It seems somehow related to the float though? If I uncheck the float in devtools it behaves normally. It's weird.

[craigcook]

D'oh! It's the pre for the PGP key at the bottom of the page. But of course. Maybe we need to make it overflow:auto so it can scroll if it needs to?

[craigcook]

Looks great! I like the mobile menu treatment, and hooray for losing the highlight style headlines. Just some nitpicks about nested semantics and the overflowing pre, neither of which is actually a showstopper. Nice work!

[stephaniehobson]

Updated to remove article markup from security pages. Reviewing that commit with white-space changes hidden will make it much more readable.

Still fighting with the <pre>.

[stephaniehobson]

Ready for re-review!

[stephaniehobson]

Also filed mozilla/protocol#422 to back-port the fix for the <pre> problem.

changes were addressed