improve hover state for navigation and post list

patdryburgh · Nov 9, 2018 · 03dacd9 · 03dacd9
1 parent a31a613
commit 03dacd9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/_sass/_menu.scss b/_sass/_menu.scss
@@ -1,6 +1,12 @@
 .site-navigation {
   margin-top: 2rem;
   padding: 0 1rem;
+  &:hover,
+  &:focus-within {
+    a {
+      opacity: .7;
+    }
+  }
 }
 
 .site-navigation ul {
@@ -24,8 +30,9 @@
   display: block;
   padding: .25em .5em;
   text-decoration: none;
+  transition: opacity .125s ease-in-out;
   &:hover,
   &:focus {
-    text-decoration: underline;
+    opacity: 1;
   }
 }
diff --git a/_sass/_post-list.scss b/_sass/_post-list.scss
@@ -1,6 +1,12 @@
 .post-list {
   margin: 1em 0;
   list-style: none;
+  &:hover,
+  &:focus-within {
+    .post-link {
+      opacity: .6;
+    }
+  }
 }
 
 .post-list li {
@@ -13,9 +19,10 @@
   flex-direction: column-reverse;
   text-decoration: none;
   padding: .25em;
+  transition: opacity .125s ease-in-out;
   &:hover,
   &:focus {
-    background: $highlight;
+    opacity: 1 !important;
   }
   @media (min-width: $on-tablet) {
     display: flex;
@@ -56,12 +63,19 @@
     flex-basis: 0;
     padding: 1em 0;
   }
+  &:hover,
+  &:focus-within {
+    a {
+      opacity: .6;
+    }
+  }
   a {
     text-decoration: none;
     text-transform: uppercase;
+    transition: opacity .125s ease-in-out;
     &:hover,
     &:focus {
-      text-decoration: underline;
+      opacity: 1;
     }
   }
 }
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -1,7 +1,7 @@
 $brand-color:         #f2e300;
 $highlight:           lighten($brand-color, 35%);
 $text-color:          #0b0404;
-$muted-text-color:    #79785b;
+$muted-text-color:    #64644B;
 $font-family:         "EB Garamond", Garamond, "Times New Roman", serif;
 
 $on-bigphone:         375px;