fix(docs-infra): improve homepage layout in print mode (#42396)

In #41129, the `.hero-logo` image was changed from an `<img>` element to
a `<div>` with an image background. As a result, in print mode (where
browsers often omit backgrounds to save ink) the logo was not present.

This commit fixes this by ensuring the word `Angular` is displayed as a
title instead of the logo in print mode. It also hides the `Get started`
button in print mode, since it doesn't add any value.

Before: ![homepage-print before][1]
After: ![homepage-print after][2]

[1]: https://user-images.githubusercontent.com/8604205/120068867-889e6080-c08b-11eb-9bd5-233d8592f7ec.png
[2]: https://user-images.githubusercontent.com/8604205/120068869-89cf8d80-c08b-11eb-8740-a68a5ef68c34.png

PR Close #42396

aio/content/marketing/index.html

@@ -13,7 +13,7 @@
     <!-- CONTAINER -->
     <div class="homepage-container">
       <div class="hero-headline no-toc">The modern web<br>developer's platform</div>
-      <a class="button hero-cta" href="docs">Get Started</a>
+      <a class="button hero-cta no-print" href="docs">Get Started</a>
     </div>
 
   </section>

aio/src/styles/_print.scss

@@ -1,4 +1,5 @@
 @use './constants';
+@use './mixins';
 
 @media print {
   // General Adjustments
@@ -78,6 +79,23 @@
     overflow: visible;
   }
 
+  section#intro {
+    .hero-logo {
+      align-items: center;
+      background: none;
+      justify-content: center;
+
+      &::after {
+        @include mixins.font-size(64);
+        @include mixins.line-height(100);
+
+        color: constants.$brightred;
+        content: 'Angular';
+        font-weight: bold;
+      }
+    }
+  }
+
   .filetree {
     max-width: 100%;
   }