From b509a7dc425ed87c46ca65b33c73238de1a6d588 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 18 Feb 2021 18:42:49 +0200
Subject: [PATCH] fix(docs-infra): make the "Contributors" page header similar
 to other marketing pages (#40881)

Before (wide screen): ![contributors (wide screen) before][1]
Before (narrow screen): ![contributors (narrow screen) before][2]
After (wide screen): ![contributors (wide screen) after][3]
After (narrow screen): ![contributors (narrow screen) after][4]

[1]: https://user-images.githubusercontent.com/8604205/107983880-634f8000-6fcf-11eb-8ad9-5a5df65d3d5e.png
[2]: https://user-images.githubusercontent.com/8604205/107983893-6a768e00-6fcf-11eb-9ccd-158ec491404f.png
[3]: https://user-images.githubusercontent.com/8604205/107983903-6f3b4200-6fcf-11eb-94e1-182893b7a715.png
[4]: https://user-images.githubusercontent.com/8604205/107983895-6ba7bb00-6fcf-11eb-9ff5-59d221ba906d.png

PR Close #40881
---
 aio/content/marketing/about.html              | 21 ++++++++++++-------
 .../styles/1-layouts/_marketing-layout.scss   | 15 ++++++++++---
 aio/src/styles/2-modules/_notification.scss   |  8 ++++++-
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/aio/content/marketing/about.html b/aio/content/marketing/about.html
index 907ef4f9d6..c006ad27ff 100644
--- a/aio/content/marketing/about.html
+++ b/aio/content/marketing/about.html
@@ -1,9 +1,14 @@
-<h1 class="title center no-toc">Angular Contributors</h1>
-<h2>Building For the Future</h2>
-<p>
-  Angular is built by a team of engineers who share a passion for making web development feel
-  effortless. We believe that writing beautiful apps should be joyful and fun. We're building a
-  platform for the future.
-</p>
+<header class="marketing-banner">
+  <h1 class="banner-headline no-toc no-anchor">Angular Contributors</h1>
+</header>
 
-<aio-contributor-list></aio-contributor-list>
+<article>
+  <h2>Building For the Future</h2>
+  <p>
+    Angular is built by a team of engineers who share a passion for making web development feel
+    effortless. We believe that writing beautiful apps should be joyful and fun. We're building a
+    platform for the future.
+  </p>
+
+  <aio-contributor-list></aio-contributor-list>
+</article>
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 41c27a1b58..9749258ed9 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -261,7 +261,13 @@ section#intro {
 }
 
 aio-shell {
-  &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
+  &.page-about,
+  &.page-contribute,
+  &.page-events,
+  &.page-features,
+  &.page-home,
+  &.page-presskit,
+  &.page-resources {
     .sidenav-content {
       padding: 0 0 3rem;
     }
@@ -269,11 +275,14 @@ aio-shell {
 
   &.page-home {
     .sidenav-content {
-      padding: 0;
+      padding-bottom: 0;
     }
   }
 
-  &.page-home, &.page-resources, &.page-contribute {
+  &.page-about,
+  &.page-contribute,
+  &.page-home,
+  &.page-resources {
     article {
       padding: 32px;
 
diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss
index 4e1fc91837..c557f4ba75 100644
--- a/aio/src/styles/2-modules/_notification.scss
+++ b/aio/src/styles/2-modules/_notification.scss
@@ -91,7 +91,13 @@ aio-notification {
     }
   }
 
-  &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute  {
+  &.page-about,
+  &.page-contribute,
+  &.page-events,
+  &.page-features,
+  &.page-home,
+  &.page-presskit,
+  &.page-resources {
     mat-sidenav-container.sidenav-container {
       .sidenav-content {
         padding-top: $notificationHeight;