From 272b5645c4e01a899e224d3a26c8559bd5f90232 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 23 Feb 2021 16:49:20 +0200
Subject: [PATCH] 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
---
 aio/src/styles/2-modules/_resources.scss | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss
index e10966f960..7fb53654d9 100644
--- a/aio/src/styles/2-modules/_resources.scss
+++ b/aio/src/styles/2-modules/_resources.scss
@@ -4,11 +4,7 @@ aio-resource-list {
     box-shadow: 0 1px 4px 0 rgba($black, 0.37);
     border-radius: 4px;
     margin-bottom: 8px * 6;
-    width: 80%;
-
-    @media (max-width: 600px) {
-      width: 100%;
-    }
+    max-width: 50em;
   }
 
   .resource-item {
@@ -32,11 +28,9 @@ aio-resource-list {
     padding: 16px 23px;
     margin: 0;
     background-color: $mist;
-    color: #373E41;
   }
 
   .resource-row-link {
-    color: #1a2326;
     display: flex;
     flex-direction: column;
     border: transparent solid 1px;
@@ -44,9 +38,8 @@ aio-resource-list {
     transition: all .3s;
 
     &:hover {
-      color: #1a2326;
       text-decoration: none;
-      border-color: #2B85E7;
+      border-color: rgba($blue, 0.5);
       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);
       transform: translateY(-2px);