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;