<head>
<link href='//fonts.googleapis.com/css?family=Lusitana:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700italic,700,800,800italic' rel='stylesheet' type='text/css'>
</head>
<article class="type-system-serif">
<p class="type">Article Type</p>
<h1>Article Heading</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
<p class="date">30 Mar 2014</p>
<p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
<a href="javascript:void(0)" class="read-more">Read More <span>›</span></a>
</p>
<h3>Subheading lorem</h3>
<p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
<hr>
<p class="author">Author Name</p>
</article>
|
article.type-system-serif {
$base-border-radius: 3px !default;
$base-line-height: 1.5em !default;
$base-spacing: 1.5em !default;
$action-color: #477DCA !default;
$dark-gray: #333 !default;
$light-gray: #DDD !default;
$medium-screen: 40em !default;
$base-font-color: $dark-gray !default;
$serif: 'Lusitana', serif;
$serif-2: 'Merriweather', serif;
$sans-serif: 'Merriweather Sans', sans-serif;
@include clearfix;
font-family: $serif-2;
text-align: left;
h1, h2, h3, p {
margin: 0;
}
hr {
border-bottom: 1px solid $light-gray;
border-left: 0;
border-right: 0;
border-top: 0;
margin: $base-spacing 0;
}
p {
color: $base-font-color;
line-height: $base-line-height;
}
a {
color: $action-color;
text-decoration: none;
}
.type {
border-bottom: 1px solid;
display: inline-block;
font-family: $sans-serif;
font-size: 0.7em;
font-weight: 700;
margin-bottom: 2em;
padding: 0.3em 0;
text-align: left;
text-transform: uppercase;
}
h1 {
font-family: $serif;
font-size: 2em;
font-weight: 700;
margin-bottom: 0.5em;
@include media($medium-screen) {
font-size: 2.6em;
}
}
h2 {
font-family: $serif-2;
font-size: 1em;
font-style: italic;
font-weight: 400;
line-height: 1.6em;
margin-bottom: 0.9em;
@include media($medium-screen) {
font-size: 1.2em;
}
}
code {
background: #F7F7F7;
border-radius: $base-border-radius * 1.5;
border: 1px solid #E0E0E0;
font-family: monaco;
font-size: 0.75em;
font-style: normal;
padding: 0.1em 0.4em;
white-space: nowrap;
}
h3 {
font-family: $serif;
font-size: 1.4em;
font-weight: 400;
line-height: 1.3em;
margin-bottom: 0.4em;
}
p.date {
color: transparentize($base-font-color, 0.6);
font-family: $serif-2;
font-size: 0.9em;
font-style: italic;
margin-bottom: 0.3em;
}
p {
font-family: $serif-2;
font-size: 0.9em;
line-height: 1.6em;
margin-bottom: 1.5em;
span {
font-family: $sans-serif;
font-weight: 700;
}
}
a.read-more {
display: inline-block;
font-family: $sans-serif;
font-size: 0.8em;
font-weight: 700;
margin-left: 0.2em;
position: relative;
text-transform: uppercase;
span {
font-family: $serif;
font-size: 1.5em;
font-style: normal;
position: absolute;
right: -12px;
top: -1px;
}
}
hr {
width: 3em;
}
p.author {
font-family: $serif-2;
font-style: italic;
}
}
|