Use underlines to highlight links

This commit is contained in:
arne 2022-03-03 10:17:38 +01:00
commit 91e2baf8d8

View file

@ -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;
} }
} }
} }