body { 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; transition: all .125s ease-in-out; &:hover, &:focus { background: lighten($brand-color, 2.5%); border-color: $text-color; margin-top: 0; } }