add single and holy-grail layout component, update site

[wibjorn]

Tasks:

• task-925512
• task-925516

Link: preview-582
Layout page link: https://design.learn.microsoft.com/pulls/582/components/layout.html

This pull request adds a new layout component to Atlas and that components first two layouts (of 4 initially planned).

Layouts in this PR are single and holy grail. The simplest and the most complex of those planned.

In order to better test the CSS changes (and to take advantage of the new layout component itself), I retooled the site slightly.

• applied the holy grail layout and removed some of the one-off site code
• a mini feature for applying different layouts on the layout documentation page.
• a mobile menu was added to ensure that on narrow widths we could hide the large menu of navigation links. This feature was done quite hastily, and its approach was that way it is because we've yet to create a modal in Atlas. I would like to revisit it when modal is added to further improve it and remove the fullscreen functionality.
• as part of the above, a burger component that lives in the site only. Perhaps it can be removed as nav bar moves into Atlas.
• In order to test the layout-hero container, I added some build logic to extract the H1 and first paragraph from the markdown article and then add them to a hero element. This is done with yaml front matter, and hero: true. I only applied it to the layout page for now.

Testing

1. Visit preview link above. Visit /components/layout.html in TOC.
2. Resize screen to narrow. Open new mobile menu.
3. On the layout component page, try buttons in the "Try" section near the top. Also apply single layout.
4. Resize screen.
5. See paired PR.

Contributor checklist

• Did you update the description of this pull request with a review link and test steps?
• Did you submit a changeset? Changesets are required for all code changes.
• Does your pull request add a new page to the documentation site? Add your new page for automated accessibility testing in /integration/tests/accessibility.
• Does your pull request implement complex UI logic (js/ts)? Consider adding an integration test to test your user flow.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7639071

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@microsoft/atlas-site	Minor
@microsoft/atlas-css	Minor
@microsoft/parcel-transformer-markdown-html	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[bbalentine87]

@wibjorn If you close the mobile menu with the escape key, the x button gets stuck at the top of the page until you refresh.

[BenDMyers]

nit: remove this comment?

[wibjorn]

removed!