From 4a5af60dc5cdb336b13af61a7e1010cab76b2c5f Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Sun, 30 May 2021 22:11:26 +0300
Subject: [PATCH] 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 |  2 +-
 aio/src/styles/_print.scss       | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html
index 60b6aec13b..e2b7e13d19 100755
--- a/aio/content/marketing/index.html
+++ b/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>
diff --git a/aio/src/styles/_print.scss b/aio/src/styles/_print.scss
index 60921bd6af..f2a430eacb 100644
--- a/aio/src/styles/_print.scss
+++ b/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%;
   }