From 00562ed9351f3391e0ac114194cdfcd41decdfbc Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 23 Feb 2021 16:49:19 +0200
Subject: [PATCH] fix(docs-infra): center the "Contribute" page (#40944)

This commit improves the layout of the "Contribute" page by centering
the content (similar to other marketing pages).

Before: ![contribute layout before][1]
After: ![contribute layout after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108595056-5b545f00-7386-11eb-97b6-c3606dbfb5fa.png
[2]: https://user-images.githubusercontent.com/8604205/108595060-5becf580-7386-11eb-91fa-b2877f2a4691.png

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

PR Close #40944
---
 aio/content/marketing/contribute.html     | 84 ++++++++++++-----------
 aio/src/styles/2-modules/_contribute.scss |  3 +-
 2 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/aio/content/marketing/contribute.html b/aio/content/marketing/contribute.html
index 3cca5037ab..be14eb4b70 100644
--- a/aio/content/marketing/contribute.html
+++ b/aio/content/marketing/contribute.html
@@ -2,61 +2,67 @@
   <h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
 </header>
 
-<article class="contribute-container">
-  <h2 class="no-anchor">Angular Projects</h2>
+<article class="contribute-container flex-center">
+  <div>
 
-  <p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
+    <h2 class="no-anchor">Angular Projects</h2>
 
-  <div class="card-section">
-    <div>
-      <h3 class="no-anchor">Angular</h3>
+    <p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
 
-      Angular is a next generation mobile and desktop application development platform.
+    <div class="card-section">
+      <div>
+        <h3 class="no-anchor">Angular</h3>
 
-    </div>
-    <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
-      Contribute
-    </a>
-  </div>
+        Angular is a next generation mobile and desktop application development platform.
 
-  <div class="card-section">
-    <div>
-      <h3 class="no-anchor">Angular CLI</h3>
-
-      Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices.
+      </div>
 
+      <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
+        Contribute
+      </a>
     </div>
 
-    <a href="https://github.com/angular/angular-cli/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
-      Contribute
-    </a>
-  </div>
+    <div class="card-section">
+      <div>
+        <h3 class="no-anchor">Angular CLI</h3>
 
-  <div class="card-section">
-    <div>
-      <h3 class="no-anchor">Angular Material</h3>
+        Angular CLI makes it easy to create an application that already works, right out of the box.
+        It already follows our best practices.
 
-      Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification
-      for use in Angular single-page applications (SPAs).
+      </div>
 
+      <a href="https://github.com/angular/angular-cli/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
+        Contribute
+      </a>
     </div>
 
-    <a href="https://github.com/angular/components/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
-      Contribute
-    </a>
-  </div>
+    <div class="card-section">
+      <div>
+        <h3 class="no-anchor">Angular Material</h3>
 
-  <div class="card-section">
-    <div>
-      <h3 class="no-anchor">AngularFire</h3>
+        Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design
+        specification for use in Angular single-page applications (SPAs).
 
-      AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers
-      to build your Angular app.
+      </div>
 
+      <a href="https://github.com/angular/components/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
+        Contribute
+      </a>
     </div>
-    <a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
-      Contribute
-    </a>
-  </div>
 
+    <div class="card-section">
+      <div>
+        <h3 class="no-anchor">AngularFire</h3>
+
+        AngularFire is the officially supported Angular binding for Firebase.
+        Firebase is a full backend so you don't need servers to build your Angular app.
+
+      </div>
+
+      <a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
+        Contribute
+      </a>
+    </div>
+
+  </div>
 </article>
diff --git a/aio/src/styles/2-modules/_contribute.scss b/aio/src/styles/2-modules/_contribute.scss
index c6ab9bcc04..ee4ecc4ceb 100644
--- a/aio/src/styles/2-modules/_contribute.scss
+++ b/aio/src/styles/2-modules/_contribute.scss
@@ -13,7 +13,8 @@
 
     > :first-child {
       margin-right: 2rem;
-      width: 60%;
+      width: 67%;
+
       @media (max-width: 600px) {
         width: 100%;
       }