Skip to content

Instantly share code, notes, and snippets.

@brucebentley

brucebentley/Medium-Style-Hyperlinks.md

Last active August 29, 2015 14:00
Show Gist options
  • Save brucebentley/11202353 to your computer and use it in GitHub Desktop.
Save brucebentley/11202353 to your computer and use it in GitHub Desktop.
Download ZIP
Crafting hyperlink underlines, similar to how the team at https://medium.com/ have done.
Raw
index.html
<body class="level-1">
<div class="content">
<header class="header">
<h1 class="title">Crafting Link Underlines on Medium</h1>
</header>
</div>
<div class="content">
<hr class="content-divider">
</div>
<div class="content">
<div class="post body">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero <a href="#">sit amet quam egestas semper</a>. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div class="content">
<hr class="content-divider">
</div>
<div class="content">
<div class="post body">
<p>A work in progress, inspired by the <a href="https://medium.com/p/7c03a9274f9" target="_blank">article</a> I stumbled across on <a href="https://medium.com" target="_blank">Medium</a>.</p>
<p>Many thanks to <a href="https://medium.com/@mwichary" target="_blank">Marcin Wichary</a> for the inspiration!</p>
</div>
</div>
</body>
Raw
style.scss
@import "compass";
$dark-gray: #333332;
$light-gray: #666666;
$red: #ff4136;
$shadow: #b3b3b3;
$white: #ffffff;
$wisp: #f4f4f2;
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
body {
background-color: $wisp;
color: $dark-gray;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.4;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
hr {
border: 0;
border-top: 1px solid $shadow;
display: block;
margin: 50px auto 40px auto;
width: 20%;
}
p {
display: block;
}
a {
background: transparent;
color: $light-gray;
display: inline;
text-decoration: underline;
&:focus,
&:hover {
color: $red;
}
}
}
header {
display: block;
}
.title {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 50px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.02em;
letter-spacing: -0.04em;
line-height: 1.1;
margin-bottom: 8px;
text-align: center;
}
.level-1 {
.body a {
background-image: -webkit-linear-gradient(top,$white 50%,$light-gray 50%);
background-image: -moz-linear-gradient(top,$white 50%,$light-gray 50%);
background-image: -o-linear-gradient(top,$white 50%,$light-gray 50%);
background-image: linear-gradient(to bottom,$white 50%,$light-gray 50%);
background-position: 0 22px;
background-repeat: repeat-x;
background-size: 2px 2px;
text-decoration: none;
&:focus,
&:hover {
background-image: -webkit-linear-gradient(top,$white 50%,$red 50%);
background-image: -moz-linear-gradient(top,$white 50%,$red 50%);
background-image: -o-linear-gradient(top,$white 50%,$red 50%);
background-image: linear-gradient(to bottom,$white 50%,$red 50%);
}
}
.content {
display: block;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-size: 22px;
font-style: normal;
font-weight: 400;
letter-spacing: .01rem;
line-height: 1.5;
margin: 0 auto;
max-width: 60%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment