Merge pull request #252 from ember-learn/redesign/links

Link styling

Author: mansona

addon/styles/colors.css

@@ -41,6 +41,13 @@
   & a {
     color: var(--color-white);
   }
+
+  & a {
+    background-image: linear-gradient(
+      var(--color-white-40),
+      var(--color-white-40)
+    );
+  }
 }
 
 .bg-info {

addon/styles/components/es-footer.css

@@ -6,6 +6,7 @@
   & a {
     text-decoration: none;
     color: var(--color-gray-900);
+    background-image: none;
   }
 
   & .footer-info {

addon/styles/components/es-header.css

@@ -6,6 +6,11 @@
   padding: 0 var(--grid-margin);
 }
 
+.es-header a:link,
+.es-header a:visited {
+  background-image: none;
+}
+
 .es-header ul,
 .es-header li {
   list-style: none;
@@ -51,7 +56,7 @@
   border-radius: var(--radius-lg);
   box-sizing: border-box;
   line-height: var(--line-height-base);
-  color: #fff;
+  color: var(--color-white);
 }
 
 [aria-expanded="true"] ~ .navbar-list,
@@ -93,6 +98,10 @@
   width: unset;
 }
 
+.navbar-list-item-link:hover {
+  color: var(--color-brand-hc-light);
+}
+
 .navbar-list-item-dropdown-toggle {
   border: 0;
   display: block;
@@ -110,14 +119,14 @@
 }
 
 .navbar-list-item-dropdown-toggle[aria-expanded="true"] {
-  color: #ff5c44;
+  color: var(--color-brand-hc-light);
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.295 4.293C-.335 4.923.11 6 1.002 6h5.996c.891 0 1.337-1.077.707-1.707l-2.998-3a1 1 0 0 0-1.414 0l-2.998 3z' fill='%23E04E39' fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
 .navbar-dropdown-list {
   margin: 0;
   padding: 0;
-  background: #f4f6f8;
+  background: var(--color-gray-100);
   border-radius: var(--radius);
 }
 
@@ -135,26 +144,27 @@
   margin: 0;
   height: 0;
   list-style: none;
-  border-bottom: 2px solid #dee2e7;
+  border-bottom: 2px solid var(--color-gray-300);
 }
 
 .navbar-dropdown-list-item {
   display: block;
   white-space: nowrap;
 }
 
-.navbar-dropdown-list-item-link {
+.navbar-dropdown-list-item-link,
+.navbar-dropdown-list-item-link:link,
+.navbar-dropdown-list-item-link:visited {
   color: var(--color-brand);
   display: block;
-  /* padding: 1rem 2rem; */
   text-decoration: none;
 }
 
 .navbar-dropdown-list-item-link:hover,
 .navbar-dropdown-list-item-link:focus {
   position: relative;
-  background: #dee2e7;
-  color: #cf2d20;
+  background: var(--color-gray-300);
+  color: var(--color-brand);
   z-index: 1;
 }
 
@@ -213,6 +223,7 @@
       0 3px 30px -15px rgba(73, 79, 95, 0.8),
       0 0 50px -5px rgba(73, 79, 95, 0.5);
     width: auto;
+    min-width: 12rem;
     margin: 0;
     position: absolute;
     left: -0.5rem;

addon/styles/global.css

@@ -1,8 +1,9 @@
 :root {
   /* Vertical rhythm is based on multiples of 8. */
 
-  --font-family-sans: 'Inter var', 'Inter web', -apple-system, BlinkMacSystemFont, Segoe UI,
-    Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --font-family-sans: "Inter var", "Inter web", -apple-system,
+    BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
 
   --color-white: #fff;
   --color-gray-100: #f4f6f8;
@@ -15,11 +16,13 @@
   --color-gray-800: #2b2d34;
   --color-gray-900: #1c1e24;
   --color-black: #000;
+  --color-white-40: rgba(255, 255, 255, 0.4);
 
   --color-brand: #e04e39;
   --color-brand-text: #ffd7d2;
   --color-brand-hc-light: #ff5c44;
   --color-brand-hc-dark: #cf2d20;
+  --color-brand-40: rgba(224, 78, 57, 0.4);
 
   --color-gray: #a2a3a8;
   --color-success: #d9f9e3;
@@ -97,11 +100,6 @@
   }
 }
 
-*:focus {
-  outline: none;
-  box-shadow: 0 0 0px 3px rgba(25, 116, 220, 0.8);
-}
-
 body,
 html {
   margin: 0;
@@ -121,13 +119,29 @@ main {
   background-color: var(--color-gray-100);
 }
 
-a {
+a,
+a:link,
+a:visited {
+  color: var(--color-brand-hc-dark);
+  text-decoration: none;
+  background: no-repeat left bottom
+    linear-gradient(var(--color-brand-40), var(--color-brand-40));
+  background-size: 100% 0.1875rem;
+}
+
+a:focus,
+a:hover {
   color: var(--color-brand);
 }
 
 a:active,
 .active {
-  color: var(--color-gray-900);
+  color: var(--color-brand);
+}
+
+*:focus {
+  outline: none;
+  box-shadow: 0 0 0px 3px rgba(25, 116, 220, 0.8);
 }
 
 p {