fix(docs-infra): improve legibility and focus on content (#40427)

This commit changes the layout of the main content to improve
legibility, especially on wider screens:

- Limit main content width to 50em (800px by default).
- Center main content on the page.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40427

aio/src/styles/0-base/_typography.scss

@@ -102,13 +102,14 @@ a {
   @include line-height(32);
   font-weight: 400;
   color: $darkgray;
+
   & > em {
     @include letter-spacing(0.3);
   }
 }
 
 p {
-  margin: 14px 0 0;
+  margin: 1em 0;
 }
 
 p + ul {

aio/src/styles/1-layouts/_content-layout.scss

@@ -6,6 +6,8 @@
 .sidenav-content {
   min-height: 100vh;
   padding: 80px 3rem 2rem;
+  max-width: 50em;
+  margin: 0 auto;
 
   @media screen and (max-width: 600px) {
     min-height: 450px;
@@ -16,9 +18,15 @@
     padding: 80px 1rem 1rem;
   }
 
-  aio-shell.page-docs & {
+  .page-about &,
-    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
+  .page-contribute &,
-    margin: auto;
+  .page-events &,
+  .page-features &,
+  .page-guide-cheatsheet &,
+  .page-home &,
+  .page-presskit &,
+  .page-resources & {
+    max-width: none;
   }
 
   button {

aio/src/styles/1-layouts/_footer.scss

@@ -13,6 +13,7 @@ footer {
 
     & > * {
       color: $white;
+      max-width: 50em;
     }
   }
 
@@ -56,7 +57,7 @@ footer {
 
   p {
     text-align: center;
-    margin: 10px 0px 5px;
+    margin: 10px auto 5px;
 
     @media (max-width: 480px) {
       text-align: left;
@@ -69,7 +70,7 @@ footer {
     display: flex;
     justify-content: center;
     text-align: left;
-    margin: 0 0 40px;
+    margin: 0 auto 40px;
 
     ul {
       list-style-position: inside;

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -262,13 +262,13 @@ section#intro {
 
 aio-shell {
   &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
-    main {
+    .sidenav-content {
-      padding: 0rem 0rem 3rem;
+      padding: 0 0 3rem;
     }
   }
 
   &.page-home {
-    main {
+    .sidenav-content {
       padding: 0;
     }
   }