iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): improve the layout of the "Resources" page (#40944) 

This commit improves the readability of the "Resources" page by limiting
the content's max width to 50em (which is 800px by default).

It also gets rid of custom color values and either uses the default
color or colors specified via Sass variables.

Before: ![resources page before][1]
After: ![resources page after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108601949-104b4380-73a8-11eb-864b-948db8c36f80.png
[2]: https://user-images.githubusercontent.com/8604205/108602036-894a9b00-73a8-11eb-870d-39bea9b46d97.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
This commit is contained in:
George Kalpakas 2021-02-23 16:49:20 +02:00 committed by Zach Arend
parent d3eff182e3
commit 272b5645c4
1 changed files with 2 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
aio/src/styles/2-modules/_resources.scss
View File

@ -4,11 +4,7 @@ aio-resource-list {
box-shadow: 0 1px 4px 0 rgba($black, 0.37); box-shadow: 0 1px 4px 0 rgba($black, 0.37);
border-radius: 4px; border-radius: 4px;
margin-bottom: 8px * 6; margin-bottom: 8px * 6;
width: 80%; max-width: 50em;
@media (max-width: 600px) {
width: 100%;
}
} }
.resource-item { .resource-item {
@ -32,11 +28,9 @@ aio-resource-list {
padding: 16px 23px; padding: 16px 23px;
margin: 0; margin: 0;
background-color: $mist; background-color: $mist;
color: #373E41;
} }
.resource-row-link { .resource-row-link {
color: #1a2326;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: transparent solid 1px; border: transparent solid 1px;
@ -44,9 +38,8 @@ aio-resource-list {
transition: all .3s; transition: all .3s;
&:hover { &:hover {
color: #1a2326;
text-decoration: none; text-decoration: none;
border-color: #2B85E7; border-color: rgba($blue, 0.5);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12); box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
transform: translateY(-2px); transform: translateY(-2px);