Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

better icon display for `<a rel="external">`

  • Loading branch information...
commit 5417ae9ad2a796956951938bedb6edc0c84c9729 1 parent 4695cfc
@wafflesnatcha wafflesnatcha authored
View
27 files/scss/style.scss
@@ -78,19 +78,32 @@ body.scott {
}
a[rel="external"] {
- margin-right: image-width('external-link.png') - 1;
+ position: relative;
}
a[rel="external"]::after {
- content: image-url('external-link.png');
+ @include background-image(
+ image-url('external-link.png'),
+ radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 65%, rgba(255,255,255,0) 90%)
+ );
+ background: {
+ position: center;
+ repeat: no-repeat;
+ };
+ content: '';
+ display: none;
height: image-height('external-link.png');
- line-height: 100%;
- margin: 0 0 0 -1px;
- opacity: .8;
- padding: 0 0 0 2px;
+ margin: 0;
+ padding: 1px;
position: absolute;
- vertical-align: middle;
+ right: -1 * ( image-width('external-link.png') + 2 );
+ top: 15%;
width: image-width('external-link.png');
+ z-index: 1;
+ }
+
+ a[rel="external"]:hover::after {
+ display: block;
}
b, strong {
View
BIN  images/external-link.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 style.css
@@ -50,9 +50,9 @@ body.scott {
position: relative;
}
.scott a[rel="external"]::after {
- background-image: url('images/external-link.png?1346624729'), -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(70%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0.8)));
- background-image: url('images/external-link.png?1346624729'), -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.8) 100%);
- background-image: url('images/external-link.png?1346624729'), radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.8) 100%);
+ background-image: url('images/external-link.png?1346624729'), -webkit-gradient(radial, 50%, 0, 50%, 90, color-stop(65%, rgba(255, 255, 255, 0.8)), color-stop(90%, rgba(255, 255, 255, 0)));
+ background-image: url('images/external-link.png?1346624729'), -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.8) 65%, rgba(255, 255, 255, 0) 90%);
+ background-image: url('images/external-link.png?1346624729'), radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.8) 65%, rgba(255, 255, 255, 0) 90%);
background-position: center;
background-repeat: no-repeat;
content: '';
@@ -61,8 +61,8 @@ body.scott {
margin: 0;
padding: 1px;
position: absolute;
- right: -8px;
- top: 25%;
+ right: -12px;
+ top: 15%;
width: 10px;
z-index: 1;
}
Please sign in to comment.
Something went wrong with that request. Please try again.