From 8736fcd3d97b7f1703ab5ca44e46aaa1813257f0 Mon Sep 17 00:00:00 2001 From: George Kalpakas 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;