refactor(docs-infra): create mixin for styling marketing pages (#40881)

Previously, in order to apply some styles to marketing (i.e. non-docs)
pages, we listed the various `.page-*` classes that corresponded to docs
pages. This meant that adding/removing a marketing page required updates
in several places, which is error-prone.

This commit avoids this by using a Sass mixin for applying styles to
marketing pages.

PR Close #40881

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

@@ -34,14 +34,7 @@ h2 {
   margin-top: 4rem;
   padding-top: 4rem;
 
-  .page-about &,
+  @include marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
-  .page-api &,
-  .page-contribute &,
-  .page-events &,
-  .page-features &,
-  .page-home &,
-  .page-presskit &,
-  .page-resources & {
     border-top: 0;
     margin-top: 2rem;
     padding-top: 0;

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

@@ -18,14 +18,7 @@
     padding: 80px 1rem 1rem;
   }
 
-  .page-about &,
+  @include marketing-pages($extraSelectors: ('.page-guide-cheatsheet'), $nestParentSelector: true) {
-  .page-contribute &,
-  .page-events &,
-  .page-features &,
-  .page-guide-cheatsheet &,
-  .page-home &,
-  .page-presskit &,
-  .page-resources & {
     max-width: none;
   }
 

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

@@ -261,49 +261,35 @@ section#intro {
   }
 }
 
-aio-shell {
+@include marketing-pages {
-  &.page-about,
+  .sidenav-content {
-  &.page-contribute,
+    padding: 0 0 3rem;
-  &.page-events,
-  &.page-features,
-  &.page-home,
-  &.page-presskit,
-  &.page-resources {
-    .sidenav-content {
-      padding: 0 0 3rem;
-    }
   }
 
-  &.page-home {
+  article {
-    .sidenav-content {
+    padding: 3rem;
-      padding-bottom: 0;
+
+    @media (max-width: 800px) {
+      padding: 2.2rem;
     }
   }
-
-  &.page-about,
-  &.page-contribute,
-  &.page-events,
-  &.page-features,
-  &.page-home,
-  &.page-presskit,
-  &.page-resources {
-    article {
-      padding: 3rem;
-
-      @media (max-width: 800px) {
-        padding: 2.2rem;
-      }
-    }
-  }
-
-  .cta-bar .hero-cta {
-    color: $blue;
-  }
 }
 
-.cta-bar.announcement-bar {
+.page-home {
-  background: none;
+  .sidenav-content {
-  box-shadow: none;
+    padding-bottom: 0;
+  }
+}
+
+.cta-bar {
+  &.announcement-bar {
+    background: none;
+    box-shadow: none;
+  }
+
+  .hero-cta {
+    color: $blue;
+  }
 }
 
 .text-headline {

aio/src/styles/1-layouts/_top-menu.scss

@@ -26,13 +26,7 @@ mat-toolbar.app-toolbar {
   }
 
   // MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
-  .page-about &,
+  @include marketing-pages($nestParentSelector: true) {
-  .page-contribute &,
-  .page-events &,
-  .page-features &,
-  .page-home &,
-  .page-presskit &,
-  .page-resources & {
     box-shadow: none;
 
     // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE

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

@@ -90,14 +90,10 @@ aio-notification {
       }
     }
   }
+}
 
-  &.page-about,
+@include marketing-pages {
-  &.page-contribute,
+  &.aio-notification-show {
-  &.page-events,
-  &.page-features,
-  &.page-home,
-  &.page-presskit,
-  &.page-resources {
     mat-sidenav-container.sidenav-container {
       .sidenav-content {
         padding-top: $notificationHeight;

aio/src/styles/_mixins.scss

@@ -177,3 +177,58 @@
     }
   }
 }
+
+/// Define some styles for marketing (i.e. non-docs) pages.
+///
+/// @example scss - Example SCSS:
+///   .foo {
+///     @include marketing-pages {
+///       .bar {
+///         color: orange;
+///       }
+///     }
+///   }
+///
+///   .baz {
+///     @include marketing-pages($extraSelectors: ('.other-page'), $nestParentSelector: true) {
+///       .qux {
+///         color: orange;
+///       }
+///     }
+///   }
+///
+/// @example css - Output CSS:
+///   .foo .page-about .bar, .foo .page-contribute .bar, ... {
+///     color: orange;
+///   }
+///
+///   .page-about .baz .qux, .page-contribute .baz .qux, ..., .other-page .baz .qux {
+///     color: orange;
+///   }
+///
+/// @param {string[]} $extraSelectors
+///   A list of additional page selectors to apply the styles to.
+/// @param {boolean} $nestParentSelector
+///   If true, the parent selector (`&`) is nested inside the marketing pages selectors.
+@mixin marketing-pages($extraSelectors: (), $nestParentSelector: false) {
+  $marketingPagesSelectors: (
+    '.page-about',
+    '.page-contribute',
+    '.page-events',
+    '.page-features',
+    '.page-home',
+    '.page-presskit',
+    '.page-resources',
+  );
+  $selectors: join($marketingPagesSelectors, $extraSelectors, $separator: comma);
+
+  @if $nestParentSelector and & {
+    @at-root #{selector-nest(#{$selectors}, &)} {
+      @content;
+    }
+  } @else {
+    #{$selectors} {
+      @content;
+    }
+  }
+}