From 03dacd940a7bf9e8ee0372e01cceeeae3950700f Mon Sep 17 00:00:00 2001
From: Pat Dryburgh <hello@patdryburgh.com>
Date: Fri, 9 Nov 2018 10:18:10 -0800
Subject: [PATCH] improve hover state for navigation and post list

---
 _sass/_menu.scss      |  9 ++++++++-
 _sass/_post-list.scss | 18 ++++++++++++++++--
 _sass/_variables.scss |  2 +-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/_sass/_menu.scss b/_sass/_menu.scss
index 1ea942f7d..327728183 100644
--- 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;
   }
 }
\ No newline at end of file
diff --git a/_sass/_post-list.scss b/_sass/_post-list.scss
index de3a0598a..27a90e073 100644
--- 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;
     }
   }
 }
\ No newline at end of file
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index 545b36e00..9dec1cd31 100644
--- 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;