html {
font-family: $font-main; font-size: $small-font-size; @media (min-width: $screen-medium) { font-size: $base-font-size; } // Optimise text for legibility text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
}
body {
background-color: $color-background; color: $color-text; letter-spacing: $base-letter-spacing; line-height: $base-line-height; padding: 2rem 1.5rem;
}
p {
margin: 0 0 1rem;
}
h1, h2, h3, h4, h5, h6 {
color: $color-text-dark; font-family: $font-headings; font-weight: bold; letter-spacing: $heading-letter-spacing; line-height: $heading-line-height; margin-bottom: .5rem; margin-top: 0;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.2rem;
}
ol + h1, ol + h2, ol + h3, p + h1, p + h2, p + h3, ul + h1, ul + h2, ul + h3 {
margin-top: 1.5rem;
}
//————————— // Emphasis //————————— em, strong {
padding-left: .1em; padding-right: .1em;
}
em {
color: $color-text-light;
}
strong {
color: $color-text-dark; font-weight: bold;
}
//————————— // Lists //————————— ol, ul {
margin-bottom: 1rem; margin-top: 0; padding-left: 1.5em;
}
.body li {
margin-bottom: .25rem;
}
ul ul {
margin-bottom: .5rem; margin-top: .25rem;
}
//————————— // Code //————————— code, pre {
font-family: $font-mono;
}
code {
background-color: $color-grey-lightest; border-radius: .15em; color: $color-mono; font-size: 90%; font-style: normal; font-weight: normal; padding: .15em .3em; @media (max-width: $screen-small) { word-break: break-word; }
}
pre {
display: block; font-size: .875rem; line-height: 1.4; margin: 0 0 1rem; overflow-x: auto; white-space: pre; word-wrap: normal;
}
pre code {
background-color: transparent; color: inherit; padding: 0;
}
.highlight {
padding: 1rem 1.25rem;
}
.highlight pre {
font-size: .875rem; margin-bottom: 0;
}
//————————— // Links //————————— a {
color: $color-link; font-weight: inherit; line-weight: inherit; text-decoration: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
a:hover {
color: $color-link-hover;
}
h1 a {
border-bottom: 0;
}
.body a, .footer a {
border-bottom: 1px solid $color-link-underline;
}
.body a:hover, .footer a:hover {
border-bottom-color: $color-link-hover;
}
//————————— // Other elements //————————— abbr {
background-color: $color-grey-lighter; border-radius: 3px; color: $color-text; display: inline-block; font-size: 13px; font-weight: bold; padding: 3px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); text-transform: uppercase;
}
blockquote {
border-left: .5rem solid $color-grey-lighter; color: $color-text-lighter; margin: 0 2rem 1rem -2rem; padding: 0 0 0 1.5rem;
}
blockquote p:last-child {
margin-bottom: 0;
}
hr {
background-color: $color-grey-lighter; border: 0; height: 1px; margin: 2rem auto; width: 100px;
}
figure, img {
border-radius: .25rem; display: block; margin: 0 auto 1rem;
}
figure > figcaption {
color: $color-text-lighter; font-size: .85rem; margin-top: -.5rem; text-align: center;
}
figcaption > a {
color: $color-text-light;
}
figcaption > a:hover {
color: $color-text;
}