fix(css): improve appearance of links

- remove underline when hover, makes hover more visible
- remove underline from link icon
- fill link icon with link's colour (inspired by MDN)
This commit is contained in:
curben 2019-08-12 13:57:03 +09:30
parent c7c89099fb
commit 8c01309128
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
1 changed files with 18 additions and 9 deletions

View File

@ -154,15 +154,6 @@ q:before {
vertical-align: baseline; vertical-align: baseline;
} }
.typo a {
border-bottom: 1px solid #1abc9c;
}
.typo a:hover {
border-bottom-color: #555;
color: #555;
}
.typo a:hover, .typo a:hover,
a, a,
ins { ins {
@ -908,6 +899,14 @@ blockquote {
word-break: break-word; word-break: break-word;
} }
.article .article-entry a {
border-bottom: 1px solid #1abc9c;
}
.article .article-entry a:hover {
border-bottom: none;
}
.article .article-entry img { .article .article-entry img {
display: block; display: block;
margin: auto; margin: auto;
@ -1398,6 +1397,16 @@ svg {
border-bottom: none; border-bottom: none;
} }
/* fill the link icon with link's color */
svg#link {
fill: #1abc9c;
}
/* don't underline link icon */
.article .article-entry a.headerlink {
border-bottom: none;
}
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {
font-size: 1.2em; font-size: 1.2em;