Refactor: Use Bootstrap container, remove article & constricted

[machikoyasuda]

closes #123

What this PR does

Removes Article

• Removes use of <article>.
• Deletes article CSS.
• Uses <main class="container"> in default.html layout instead. All pages should now use <section class="row"> and <div class="col-6"> syntax logic.

Removes Constricted

• Removes use of class="constricted" and replaces it with row/col/justify-center
• Deletes .constricted CSS.

What this PR does NOT do

• Refactor out CSS Grid from Footer, Header (to come in Refactor: Navbar header #122), and any other homepage content sections (beyond the "constricted" style)

Screenshots

Removes Article refactor

Note: This header top issue will be fixed in #122

Removes Constricted refactor

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	8b36996
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/646518a6f8e05d0008dfeda2
😎 Deploy Preview	https://deploy-preview-133--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[machikoyasuda]

@thekaveman After this PR is merged, rebase this PR with the latest from staging https://github.com/cal-itp/calitp.org/pull/118/files and the contents of the Press page should be in a container. The Header will still overlap with it until #122 is merged.

[thekaveman]

This looks mostly really good!

I think using <section> for everything here is not semantically correct though. From the spec:

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The highest-level elements as <section> e.g. <section id="deck">, <section id="details"> seem appropriate, but within those I think <div> might be the better choice.

Thoughts?

[machikoyasuda]

@thekaveman Yeah - having <section>s inside other <section>s doesn't make any sense. I think we should change the children <section>s in subsequent PRs that actually change the contents. This PR is only concerned with the outermost <main> parent (grandparent?).

cc @angela-tran

[angela-tran]

I agree we should change the inner sections to divs. I'm ok with that being done in separate issues