app/assets/stylesheets/base/_typography.scss
body {
-webkit-font-smoothing: antialiased;
background-color: $base-background-color;
color: $base-font-color;
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $header-font-family;
line-height: $header-line-height;
margin: 0;
text-rendering: optimizeLegibility; // Fix the character spacing for headings
}
h1 {
font-size: $h1-font-size;
}
h2 {
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
p {
margin: 0 0 ($base-spacing / 2);
}
a {
@include transition(color 0.1s linear);
color: $base-link-color;
text-decoration: none;
&:hover {
color: $hover-link-color;
}
&:active, &:focus {
color: $hover-link-color;
outline: none;
}
}
hr {
border-bottom: $base-border;
border-left: none;
border-right: none;
border-top: none;
margin: $base-spacing 0;
}
img,
picture {
margin: 0;
max-width: 100%;
}
blockquote {
border-left: 2px solid $base-border-color;
color: lighten($base-font-color, 15);
margin: $base-spacing 0;
padding-left: $base-spacing / 2;
}
cite {
color: lighten($base-font-color, 25);
font-style: italic;
&:before {
content: "\2014 \00A0";
}
}
$sans-serif: sans-serif;
$serif: serif;
.type {
border-bottom: 1px solid;
display: inline-block;
font-family: $sans-serif;
font-size: .7em;
font-weight: 800;
margin-bottom: 2em;
padding: .3em 0;
text-align: left;
text-transform: uppercase;
}
h1 {
font-family: $serif;
font-size: 1.8em;
font-weight: 700;
margin-bottom: .5em;
@include media($medium-screen) {
font-size: 2.6em;
}
}
h2 {
font-family: $serif;
font-style: italic;
font-size: 1.2em;
font-weight: 400;
line-height: 1.4em;
margin-bottom: 1.1em;
@include media($medium-screen) {
font-size: 1.3em;
}
}
code {
white-space: nowrap;
background: #F7F7F7;
border: 1px solid #E0E0E0;
border-radius: $base-border-radius * 1.5;
padding: .1em .4em;
font-size: .7em;
font-style: normal;
}
h3 {
font-family: $serif;
font-size: 1.4em;
font-weight: 400;
line-height: 1.3em;
margin-bottom: .4em;
}
p.date {
color: transparentize($base-font-color, .6);
font-family: $serif;
font-style: italic;
font-size: .9em;
margin-bottom: .3em;
}
p {
font-family: $sans-serif;
line-height: 1.5em;
font-size: 1.05em;
margin-bottom: 1.5em;
}
a.read-more {
display: inline-block;
font-family: $sans-serif;
font-weight: 700;
font-size: .8em;
text-transform: uppercase;
margin-left: .2em;
position: relative;
span {
font-family: $sans-serif;
font-style: normal;
position: absolute;
font-size: 1.5em;
top: -1px;
right: -12px;
}
}
hr {
width: 3em;
}
p.author {
font-family: $sans-serif;
}