governance-ecologies/govarch-website
1
0
Fork 0
mirror of https://github.com/metagov/govarch-website.git synced 2025-06-19 09:33:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve hover state for navigation and post list

Browse Source
This commit is contained in:
Pat Dryburgh
2018-11-09 10:18:10 -08:00
parent a31a613c5f
commit 03dacd940a
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
_sass/_menu.scss
View File

@ -1,6 +1,12 @@
.site-navigation { .site-navigation {
margin-top: 2rem; margin-top: 2rem;
padding: 0 1rem; padding: 0 1rem;
&:hover,
&:focus-within {
a {
opacity: .7;
}
}
} }
.site-navigation ul { .site-navigation ul {
@ -24,8 +30,9 @@
display: block; display: block;
padding: .25em .5em; padding: .25em .5em;
text-decoration: none; text-decoration: none;
transition: opacity .125s ease-in-out;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: underline; opacity: 1;
} }
} }

18
_sass/_post-list.scss
View File

@ -1,6 +1,12 @@
.post-list { .post-list {
margin: 1em 0; margin: 1em 0;
list-style: none; list-style: none;
&:hover,
&:focus-within {
.post-link {
opacity: .6;
}
}
} }
.post-list li { .post-list li {
@ -13,9 +19,10 @@
flex-direction: column-reverse; flex-direction: column-reverse;
text-decoration: none; text-decoration: none;
padding: .25em; padding: .25em;
transition: opacity .125s ease-in-out;
&:hover, &:hover,
&:focus { &:focus {
background: $highlight; opacity: 1 !important;
} }
@media (min-width: $on-tablet) { @media (min-width: $on-tablet) {
display: flex; display: flex;
@ -56,12 +63,19 @@
flex-basis: 0; flex-basis: 0;
padding: 1em 0; padding: 1em 0;
} }
&:hover,
&:focus-within {
a {
opacity: .6;
}
}
a { a {
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
transition: opacity .125s ease-in-out;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: underline; opacity: 1;
} }
} }
} }

2
_sass/_variables.scss
View File

@ -1,7 +1,7 @@
$brand-color: #f2e300; $brand-color: #f2e300;
$highlight: lighten($brand-color, 35%); $highlight: lighten($brand-color, 35%);
$text-color: #0b0404; $text-color: #0b0404;
$muted-text-color: #79785b; $muted-text-color: #64644B;
$font-family: "EB Garamond", Garamond, "Times New Roman", serif; $font-family: "EB Garamond", Garamond, "Times New Roman", serif;
$on-bigphone: 375px; $on-bigphone: 375px;