From 8736fcd3d97b7f1703ab5ca44e46aaa1813257f0 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 2 Feb 2021 14:35:45 +0200
Subject: [PATCH] fix(docs-infra): fix the styling of the cards in docs
 introduction page (#40427)

This commit fixes the layout and appearance of the cards shown in the
docs introduction page (`/docs`) in the following ways:

- Center the cards.
- Ensure two cards are shown per line (instead of 3 one the first line
  and 1 on the second).
- Adjust their widths to ensure their content fits well in them
  (given that the cards have a fixed height).
- Use more engaging styles to better indicate that the cards are
  clickable (as discussed [here][1]).

[1]: https://github.com/angular/angular/pull/40427#discussion_r560688953

PR Close #40427
---
 aio/src/styles/2-modules/_card.scss | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss
index 066ca8b36e..7b1ee812d2 100644
--- a/aio/src/styles/2-modules/_card.scss
+++ b/aio/src/styles/2-modules/_card.scss
@@ -2,13 +2,14 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  justify-content: center;
   margin: 16px 0;
 
   .docs-card {
-    @include card(194px, 30%);
+    @include card(194px, 35%);
     max-width: 340px;
-    min-width: 262px;
-    margin: 24px 8px;
+    min-width: 300px;
+    margin: 24px 16px;
     padding-bottom: 48px;
     position: relative;
 
@@ -18,19 +19,8 @@
       max-width: none;
     }
 
-    &:hover {
-      section {
-        color: $blue;
-      }
-
-      .card-footer {
-        background-color: rgba($blue, 0.1);
-        color: $blue;
-      }
-    }
-
     section {
-      color: $deepgray;
+      color: $blue;
       @include font-size(20);
       @include line-height(24);
       margin: 0;
@@ -49,6 +39,8 @@
     }
 
     .card-footer {
+      color: $darkblue;
+      background-color: rgba($blue, 0.1);
       bottom: 0;
       border-top: 0.5px solid $lightgray;
       box-sizing: border-box;
@@ -57,7 +49,6 @@
       position: absolute;
       right: 0;
       text-align: right;
-      color: $mediumgray;
 
       a {
         color: $mediumgray;