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
This commit is contained in:
George Kalpakas 2021-02-02 14:35:45 +02:00 committed by Misko Hevery
parent 6adf582510
commit 8736fcd3d9
1 changed files with 7 additions and 16 deletions

View File

@ -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;