Use underlines to highlight links
This commit is contained in:
parent
d26f740a68
commit
91e2baf8d8
1 changed files with 7 additions and 17 deletions
|
|
@ -55,19 +55,16 @@ a {
|
||||||
color: $highlight;
|
color: $highlight;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: .1em 0;
|
padding: .1em .2em;
|
||||||
transition: background .2s ease-in, box-shadow .2s ease-in;
|
|
||||||
|
|
||||||
// multi-line padded background
|
// multi-line padded background
|
||||||
box-decoration-break: clone;
|
box-decoration-break: clone;
|
||||||
background: $highlight-1;
|
border-bottom: 1px dotted $highlight;
|
||||||
box-shadow: .3em 0 0 $highlight-1,
|
|
||||||
-.3em 0 0 $highlight-1;
|
transition: .2s ease-in background;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $highlight-2;
|
background: $highlight-1;
|
||||||
box-shadow: .3em 0 0 $highlight-2,
|
|
||||||
-.3em 0 0 $highlight-2;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -184,17 +181,10 @@ footer {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #888;
|
color: #888;
|
||||||
|
border-bottom: 1px dotted #888;
|
||||||
// multi-line padded background
|
|
||||||
background: #88888822;
|
|
||||||
box-shadow: .3em 0 0 #88888822,
|
|
||||||
-.3em 0 0 #88888822;
|
|
||||||
box-decoration-break: clone;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #88888844;
|
background: #88888822;
|
||||||
box-shadow: .3em 0 0 #88888844,
|
|
||||||
-.3em 0 0 #88888844;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue