Auto merge of #3282 - Turbo87:summary-cards, r=pichfl

FrontPageList::Item: Improve styling

![Bildschirmfoto 2021-02-12 um 16 23 57](https://user-images.githubusercontent.com/141300/107795574-22e6cc80-6d59-11eb-90be-ede8e9640c99.png)

This improves the contrast on these links, but also the focus styles are much more visible now :)

Author: bors

app/components/front-page-list/item.module.css

@@ -1,16 +1,33 @@
 .link {
+    --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
+
     display: flex;
     align-items: center;
     width: 100%;
-    min-height: 60px;
+    height: 60px;
     margin: 8px 0;
-    padding: 0 10px;
-    background-color: var(--main-bg-dark);
+    padding: 0 15px;
+    background-color: white;
     color: #525252;
     text-decoration: none;
+    border-radius: 7px;
+    box-shadow: var(--shadow);
+    transition: background-color 300ms;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
+    }
+
+    &:hover, &:focus-visible {
+        color: #525252;
+        background-color: hsl(58deg 72% 97%);
+        transition: background-color 0ms;
+    }
 
-    &:hover {
-        background-color: #e4e1cc;
+    &:active {
+        transform: translateY(2px);
+        --shadow: inset 0 0 0 1px hsla(51, 50%, 44%, .15);
     }
 }