andrew/blog
andrew
/
blog
mirror of https://github.com/andrewgioia/blog.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixing arrow hover effect on links for Chrome

This commit is contained in:
Andrew Gioia 2020-07-17 12:00:18 -04:00
parent 32d9a683a4
commit 5e4acf7808
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/scss/_dark.scss
View File

@ -15,12 +15,12 @@
} }
} }
} }
a { a,
b {
color: var(--link-color-dark); color: var(--link-color-dark);
}
&:not(.arrow):hover { p a:hover {
border-bottom: 2px solid var(--link-color-dark); border-bottom: 2px solid var(--link-color-dark);
}
} }
main { main {
aside { aside {

28
assets/scss/main.scss
View File

@ -273,15 +273,13 @@ nav {
} }
} }
a { a,
b {
color: var(--link-color-normal); color: var(--link-color-normal);
font-style: normal;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
&:not(.arrow):hover {
border-bottom: 2px solid var(--link-color-normal);
}
// novelty arrow // novelty arrow
&.arrow::after { &.arrow::after {
color: inherit; color: inherit;
@ -294,9 +292,9 @@ a {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
-webkit-transform: translateY(-0.5rem) translateX(100%); -webkit-transform: translateY(-0.25rem) translateX(100%);
-moz-transform: translateY(-0.5rem) translateX(100%); -moz-transform: translateY(-0.25rem) translateX(100%);
transform: translateY(-0.5rem) translateX(100%); transform: translateY(-0.25rem) translateX(100%);
transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
} }
@ -304,14 +302,15 @@ a {
&.arrow.back::after { &.arrow.back::after {
content: $icon-arrow-left; content: $icon-arrow-left;
left: 0; left: 0;
-webkit-transform: translateY(-0.5rem) translateX(-1.5rem); -webkit-transform: translateY(-0.25rem) translateX(-1.25rem);
-moz-transform: translateY(-0.5rem) translateX(-1.5rem); -moz-transform: translateY(-0.25rem) translateX(-1.25rem);
transform: translateY(-0.5rem) translateX(-1.5rem); transform: translateY(-0.25rem) translateX(-1.25rem);
transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
} }
// show the arrow on hover // show the arrow on hover
&.arrow:hover::after { &.arrow:hover::after,
&.wa:hover b.arrow::after {
display: block; display: block;
margin-top: -3px; margin-top: -3px;
opacity: 100; opacity: 100;
@ -329,6 +328,11 @@ a {
} }
} }
// paragraph links
p a:hover {
border-bottom: 2px solid var(--link-color-normal);
}
// specific link effects // specific link effects
header h1 a.back::after { header h1 a.back::after {
-webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); -webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));

5
layouts/index.html
View File

@ -7,7 +7,10 @@
{{ range .Site.RegularPages }} {{ range .Site.RegularPages }}
<li> <li>
<div> <div>
<a href="{{ .Permalink }}" class="arrow">{{ .LinkTitle }}</a> <a href="{{ .Permalink }}" class="wa link">
<span>{{ .LinkTitle }}</span>
<b class="arrow"></b>
</a>
</div> </div>
<time> <time>
{{ .PublishDate.Format "January 2006" }} {{ .PublishDate.Format "January 2006" }}