refactor(docs-infra): use more consistent content width on marketing pages (#41051)

Previously, each marketing page used a different limit for its content's
width (if it had a limit at all) and implemented the width limiting in a
different way. Besides resulting in an inconsistent UX, this also made
it difficult to apply site-wide layout changes.

This commit makes the limit for most marketing pages consistent and uses
the same CSS class to make it easier to apply site-wide changes in the
future. The chosen limit is slightly larger than that of docs pages
(62.5em/1000px vs 50em/800px), because marketing pages have a different
type of content and layout (i.e. images, multi-column layout, etc.).
Finally, this commit also removes obsolete wrapper elements, CSS classes
and CSS styles, that are no longer necessary after the changes.

Notably, the homepage (`/`) and the "Contributors" page (`/about`) have
remained unchanged, because the former has its own layout that is
different from other marketing pages and the latter would offer a worse
UX with a small content width limit (as the one used on other marketing
pages).

The content widths of the rest of the marketing pages change slightly as
a result of the changes in this commit, but not in a way that would have
a negative impact on UX. More specifically:

| Page (URL)    | Size before | Size after |
|:--------------|------------:|-----------:|
| `/contribute` |       880px |     1000px |
| `/events`     |   unlimited |     1000px |
| `/features`   |       996px |     1000px |
| `/presskit`   |       800px |     1000px |
| `/resources`  |       800px |     1000px |

PR Close #41051

aio/content/marketing/contribute.html

@@ -2,7 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
 </header>
 
-<article class="contribute-container flex-center">
+<article class="contribute-container center-layout">
   <div>
 
     <h2 class="no-anchor">Angular Projects</h2>

aio/content/marketing/events.html

@@ -2,6 +2,6 @@
   <h1 class="banner-headline no-toc no-anchor">Events</h1>
 </header>
 
-<article class="events-container">
+<article class="center-layout">
   <aio-events></aio-events>
 </article>

aio/content/marketing/features.html

@@ -2,9 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
 </header>
 
-<article>
-  <div class="flex-center">
-    <div>
+<article class="center-layout">
   <div class="feature-section">
     <div class="feature-header">
       <div class="text-headline">Cross Platform</div>
@@ -104,8 +102,6 @@
       </div>
     </div>
   </div>
-    </div>
-  </div>
 
   <div class="cta-bar announcement-bar">
     <a class="button" href="start">Get Started</a>

aio/src/app/custom-elements/resource/resource-list.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="center-layout">
   <div class="flex-center group-buttons">
     <a *ngFor="let category of categories"
       [class.selected]="category.id == selectedCategory.id"
@@ -6,7 +6,6 @@
       (click)="selectCategory(category.id)"
       (keyup.enter)="selectCategory(category.id)">{{category.title}}</a>
   </div>
-  <div class="resources-container">
   <div class="showcase">
     <div *ngFor="let subCategory of selectedCategory?.subCategories">
       <a id="{{subCategory.id}}"></a>
@@ -23,4 +22,3 @@
     </div>
   </div>
 </div>
-</div>

aio/src/styles/1-layouts/_layout-global.scss

@@ -9,7 +9,7 @@ body,
 
 .center-layout {
   margin: 0 auto;
-  max-width: 50em;
+  max-width: 62.5em;
 }
 
 .github-links + .content h1 {

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

@@ -402,7 +402,3 @@ div[layout=row]{
     margin-bottom: 20px;
   }
 }
-
-.events-container{
-  overflow-x: auto;
-}

aio/src/styles/2-modules/_contribute.scss

@@ -5,7 +5,6 @@
 
   .card-section {
     justify-content: space-between;
-    max-width: 880px;
 
     @media (max-width: 600px) {
       flex-direction: column;

aio/src/styles/2-modules/_features.scss

@@ -24,7 +24,7 @@
     flex-wrap: wrap;
     justify-content: space-evenly;
 
-    @media (max-width: 600px) {
+    @media (max-width: 768px) {
       flex-direction: column;
     }
 

aio/src/styles/2-modules/_resources.scss

@@ -4,7 +4,6 @@ aio-resource-list {
     box-shadow: 0 1px 4px 0 rgba($black, 0.37);
     border-radius: 4px;
     margin-bottom: 8px * 6;
-    max-width: 50em;
   }
 
   .resource-item {
@@ -18,12 +17,6 @@ aio-resource-list {
     }
   }
 
-  .resources-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
   .subcategory-title {
     padding: 16px 23px;
     margin: 0;

aio/src/styles/2-modules/_table.scss

@@ -109,7 +109,7 @@ table {
   }
 }
 
-.events-container {
+.page-events {
   tr > td, tr > th {
     width: 33%;
   }