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

@@ -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 {
+.sidenav-content {
-  min-width: 24px;
+  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 {

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 {
+    .docs-card {
-  @include card(194px, 30%);
+      @include card(194px, 30%);
-  max-width: 340px;
+      max-width: 340px;
-  min-width: 262px;
+      min-width: 262px;
-  margin: 24px 8px;
+      margin: 24px 8px;
-  padding-bottom: 48px;
+      padding-bottom: 48px;
-  position: relative;
+      position: relative;
 
-  &:hover {
+      @media screen and (max-width: 600px) {
-    text-decoration: none;
+        width: 100%;
+        margin: 8px auto;
+        max-width: none;
+      }
 
-    section {
+      &:hover {
-      color: $blue;
+        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;
   }