From b9a94c6d02bd95082aa8e1789774f8b6db275cb8 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Mon, 15 Jul 2019 14:43:25 -0700
Subject: [PATCH] fix(docs-infra): improve small screen experience for docs
 cards layout (#31576)

- Make docs cards expand to full width in smaller screen sizes.
- Reduce spacing around card container to match general spacing patterns seen in angular.io.
- Improve SCSS formatting.

PR Close #31576
---
 aio/src/styles/1-layouts/_content-layout.scss |  52 +++---
 aio/src/styles/2-modules/_card.scss           | 149 ++++++++++--------
 2 files changed, 108 insertions(+), 93 deletions(-)

diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index 3b1ad67bb2..8455d1a172 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -1,33 +1,35 @@
-aio-shell.page-docs {
-  .sidenav-content {
-    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
-    margin: auto;
-  }
-}
-
-.sidenav-content {
-  min-height: 100vh;
-  padding: 80px 3rem 2rem;
-}
-
-@media (max-width: 600px) {
-  aio-menu {
-    display: none;
-  }
-
-  .sidenav-content {
-    min-height: 450px;
-    padding: 80px 1rem 1rem;
-  }
-}
-
 .sidenav-container {
   width: 100%;
   height: 100vh;
 }
 
-.sidenav-content button {
-  min-width: 24px;
+.sidenav-content {
+  min-height: 100vh;
+  padding: 80px 3rem 2rem;
+
+  @media screen and (max-width: 600px) {
+    min-height: 450px;
+    padding: 80px 2rem 1rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    padding: 80px 1rem 1rem;
+  }
+
+  aio-shell.page-docs & {
+    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
+    margin: auto;
+  }
+
+  button {
+    min-width: 24px;
+  }
+}
+
+aio-menu {
+  @media (max-width: 600px) {
+    display: none;
+  }
 }
 
 #guide-change-log h2::before {
diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss
index f989829e04..15cbbf35fa 100644
--- a/aio/src/styles/2-modules/_card.scss
+++ b/aio/src/styles/2-modules/_card.scss
@@ -2,76 +2,82 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 24px 0;
-}
+    margin: 16px 0;
 
-.docs-card {
-  @include card(194px, 30%);
-  max-width: 340px;
-  min-width: 262px;
-  margin: 24px 8px;
-  padding-bottom: 48px;
-  position: relative;
+    .docs-card {
+      @include card(194px, 30%);
+      max-width: 340px;
+      min-width: 262px;
+      margin: 24px 8px;
+      padding-bottom: 48px;
+      position: relative;
 
-  &:hover {
-    text-decoration: none;
+      @media screen and (max-width: 600px) {
+        width: 100%;
+        margin: 8px auto;
+        max-width: none;
+      }
 
-    section {
-      color: $blue;
+      &:hover {
+        text-decoration: none;
+
+        section {
+          color: $blue;
+        }
+
+        p {
+          color: $darkgray;
+          padding: 0 16px;
+        }
+
+        .card-footer {
+          @include line-height(32);
+          padding: 8px 16px;
+          background-color: rgba($blue, 0.1);
+          color: $blue;
+        }
+      }
+
+      section {
+        color: $deepgray;
+        @include font-size(20);
+        @include line-height(24);
+        margin: 0;
+        padding: 32px 0 24px;
+        text-transform: none;
+        text-align: center;
+      }
+
+      p {
+        color: $darkgray;
+        @include font-size(13);
+        @include line-height(24);
+        padding: 0 16px;
+        margin: 0;
+        text-align: center;
+      }
+
+      .card-footer {
+        bottom: 0;
+        border-top: 0.5px solid $lightgray;
+        box-sizing: border-box;
+        @include line-height(48);
+        left: 0;
+        position: absolute;
+        right: 0;
+        text-align: right;
+        color: $mediumgray;
+
+        a {
+          color: $mediumgray;
+          @include font-size(13);
+        }
+      }
+
+      .card-footer.center {
+        text-align: center;
+      }
     }
-
-    p {
-      color: $darkgray;
-      padding: 0 16px;
-    }
-
-    .card-footer {
-      @include line-height(32);
-      padding: 8px 16px;
-      background-color: rgba($blue, 0.1);
-      color: $blue;
-    }
-  }
-
-
-  section {
-    color: $deepgray;
-    @include font-size(20);
-    @include line-height(24);
-    margin: 0;
-    padding: 32px 0 24px;
-    text-transform: none;
-    text-align: center;
-  }
-
-  p {
-    color: $darkgray;
-    @include font-size(13);
-    @include line-height(24);
-    padding: 0 16px;
-    margin: 0;
-    text-align: center;
-  }
-
-  .card-footer {
-    bottom: 0;
-    border-top: 0.5px solid $lightgray;
-    box-sizing: border-box;
-    @include line-height(48);
-    left: 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    color: $mediumgray;
-
-    a {
-      color: $mediumgray;
-      @include font-size(13);
-    }
-  }
-  .card-footer.center {
-    text-align: center;
-  }
 }
 
 .card-section {
@@ -87,11 +93,18 @@
     box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin: 8px 0;
   }
 
-  a, .button, button {
+  a,
+  .button,
+  button {
     text-align: center;
   }