Merge pull request #257 from ember-learn/redesign/main-links

Scope fancy link styling to site `<main>`

Author: pichfl

addon/styles/components/es-button.css

@@ -1,4 +1,7 @@
-.es-button {
+.es-button,
+a.es-button,
+a.es-button:link,
+a.es-button:visited {
   background-color: var(--color-brand);
   color: var(--color-white);
   padding-left: var(--spacing-3);

addon/styles/components/es-footer.css

@@ -3,12 +3,20 @@
 } */
 
 .es-footer {
-  & a {
+  & a,
+  &:link,
+  &:visited {
     text-decoration: none;
-    color: var(--color-gray-900);
+    color: var(--color-gray-600);
     background-image: none;
   }
 
+  & a:focus,
+  & a:hover {
+    text-decoration: underline;
+    color: var(--color-brand);
+  }
+
   & .footer-info {
     display: flex;
     padding: var(--spacing-2) 0;
@@ -66,3 +74,12 @@
     max-width: 4rem;
   }
 }
+
+footer.es-footer {
+  & a,
+  &:link,
+  &:visited {
+    color: var(--color-gray-600);
+    background-image: none;
+  }
+}

addon/styles/components/es-header.css

@@ -91,7 +91,9 @@
   box-sizing: border-box;
 }
 
-.navbar-list-item-link {
+.navbar-list-item-link,
+.navbar-list-item-link:link,
+.navbar-list-item-link:visited {
   display: block;
   color: inherit;
   text-decoration: none;

addon/styles/global.css

@@ -115,27 +115,32 @@ body {
   line-height: var(--line-height-base);
 }
 
+a {
+  color: var(--color-brand-hc-dark);
+  text-decoration: underline;
+}
+
 main {
   background-color: var(--color-gray-100);
 }
 
-a,
-a:link,
-a:visited {
+main a,
+main a:link,
+main 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 {
+main a:focus,
+main a:hover {
   color: var(--color-brand);
 }
 
-a:active,
-.active {
+main a:active,
+main .active {
   color: var(--color-brand);
 }
 

addon/styles/well.css

@@ -2,12 +2,17 @@
   display: flex;
   height: 100%;
   box-sizing: border-box;
-  background: var(--color-white);
   border-radius: var(--radius-lg);
   border: 2px solid var(--color-gray-200);
   overflow: hidden;
 }
 
+a.well:link,
+a.well:visited,
+.well {
+  background: var(--color-white);
+}
+
 a.well:focus {
   border-color: var(--color-white);
 }
@@ -21,24 +26,27 @@ a.well:hover {
   margin: auto;
 }
 
-[class*='well-'] {
+[class*="well-"] {
   position: relative;
   height: 0;
 }
 
 .well-1\/1 {
+  height: 0;
   padding: 0 0 100%;
 }
 
 .well-4\/3 {
+  height: 0;
   padding: 0 0 75%;
 }
 
 .well-16\/9 {
+  height: 0;
   padding: 0 0 56.25%;
 }
 
-[class*='well-'] img {
+[class*="well-"] img {
   position: absolute;
   top: 50%;
   left: 50%;