Permalink
Browse files

medium-style link underlines

  • Loading branch information...
1 parent 0f28ed9 commit 65c6972eefb9d975f0bc76c65cb4aa0ccbce5b2e @jtremback jtremback committed Nov 25, 2015
Showing with 16 additions and 2 deletions.
  1. +2 −2 _posts/2014-06-10-see-pixyll-in-action.md
  2. +14 −0 _sass/_links.scss
@@ -9,8 +9,8 @@ categories: jekyll pixyll
There is a significant amount of subtle, yet precisely calibrated, styling to ensure
that your content is emphasized while still looking aesthetically pleasing.
-All links are easy to [locate and discern](#), yet don't detract from the harmony
-of a paragraph. The _same_ goes for italics and __bold__ elements. Even the the strikeout
+All links are easy to [locate and discern](#), yet don't detract from the [harmony
+of a paragraph](#). The _same_ goes for italics and __bold__ elements. Even the the strikeout
works if <del>for some reason you need to update your post</del>. For consistency's sake,
<ins>The same goes for insertions</ins>, of course.
View
@@ -1,5 +1,12 @@
a {
color: $link-color;
+ background-image: linear-gradient(to top,
+ rgba(0,0,0,0) 13%,
+ rgba($link-color,.8) 13%,
+ rgba($link-color,.8) 17%,
+ rgba(0,0,0,0) 17%
+ );
+ text-shadow: white 1px 0px 0px, white -1px 0px 0px;
}
a:hover,
@@ -8,4 +15,11 @@ a:active {
border: 0;
color: $link-hover-color;
text-decoration: none;
+ background-image: linear-gradient(to top,
+ rgba(0,0,0,0) 13%,
+ rgba($link-hover-color,.8) 13%,
+ rgba($link-hover-color,.8) 17%,
+ rgba(0,0,0,0) 17%
+ );
+ text-shadow: white 1px 0px 0px, white -1px 0px 0px;
}

0 comments on commit 65c6972

Please sign in to comment.