.wrapper.text-shadow
p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
a(href='#') Impedit labore voluptatibus
| laborum eaque facere ad reiciendis magni ratione hic, ea expedita, porro fugit.
p
a(href='#') Sex, drugs, & Oxford commas
| !
p
a(href='#') Dangly Dangler Dangers
p
a(href='#') A$AP Twelvyy
| 's 2014 single, "
a(href='#') Xcape
| "
p
a(href='#') happy gypsy in ypsilanti
View Compiled
$link-color: #0074d9;
$white: #fff;
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
body {
font-size: 20px;
line-height: 1.6;
// font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: 'Martel', serif;
}
p {
+ p {
margin-top: 1.5rem;
}
}
.wrapper {
margin: 0 auto;
padding: 1.5rem 1rem;
width: 100vw;
max-width: 640px;
}
a {
background:
linear-gradient($white, $white),
linear-gradient($white, $white),
linear-gradient($link-color, $link-color);
background-size:
.05em 1px,
.05em 1px,
1px 1px;
background-repeat:
no-repeat,
no-repeat,
repeat-x;
text-shadow:
0.03em 0 $white, -0.03em 0 $white, 0 0.03em $white, 0 -0.03em $white,
0.06em 0 $white, -0.06em 0 $white, 0.09em 0 $white, -0.09em 0 $white,
0.12em 0 $white, -0.12em 0 $white, 0.15em 0 $white, -0.15em 0 $white;
background-position:
0 90%,
100% 90%,
0 83%;
text-decoration: none;
color: #000;
transition: color .15s;
&:hover,
&:focus {
color: $link-color;
background: transparent;
transition: color .15s;
}
&::-moz-selection {
background-image: none;
background-color: $link-color;
color: $white;
text-shadow: none;
}
&::selection {
background-image: none;
background-color: $link-color;
color: $white;
text-shadow: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.