body {
background: $brand-color; color: $text-color; font-family: $font-family; font-size: 1.3125em; line-height: 1.5;
}
h1 {
font-size: 3em; margin: .5em auto;
}
h2 {
font-size: 2em; margin: 1em auto; text-align: center;
}
h3 {
font-size: 1.5em; margin: 1.3333em auto; text-align: center;
}
h4 {
font-size: 1.25em; font-style: italic; margin: 1.875em auto; text-align: center;
}
h5 {
font-size: 1em; font-style: italic; margin: 2em auto; text-align: center;
}
h6 {
font-size: .875em; font-style: italic; margin: 2.25em auto; text-align: center;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
a {
color: $text-color;
}
a:focus {
outline: 1px dashed $text-color;
}
blockquote {
margin: 2em auto; opacity: .8; > * { padding: 0 3em; }
}
blockquote.epigraph {
font-style: italic;
}
small {
font-size: .75em;
}
p > cite {
display: block; text-align: right;
}
hr {
border: 0; height: 0; @include divider; margin: 4em 0;
}
img {
display: flex; max-width: 100%; height: auto; margin: 2em auto;
}
figure img {
margin: 2em auto 1em;
}
figcaption {
font-size: .875em; font-style: italic; text-align: center; margin-bottom: 2em; opacity: .7;
}
.divided::after {
content: ""; @include divider;
}
.home {
max-width: 24em; margin: auto; padding: 4em 1em;
}
.content-title {
font-size: 2em; margin-bottom: 2em; text-align: center;
}
.post-date {
color: $muted-text-color; display: block; font-size: .825em; white-space: nowrap; text-transform: uppercase; .post-link & { padding: .5em 0; }
}
.site-credits {
margin: 0 auto 2em; padding: 0 2em; text-align: center;
}
.skip-navigation {
background: $brand-color; border: 1px dashed transparent; display: block; font-size: .875em; font-weight: 700; margin-top: -2.625rem; padding: .5rem; text-align: center; text-decoration: none; text-transform: uppercase; &:hover, &:focus { background: lighten($brand-color, 2.5%); border-color: $text-color; margin-top: 0; }
}