html {
font-size: $html-font-size; background-color: $bg-color; color: $fg-color; body { background-color: $bg-color; color: $fg-color; margin: $body-margin; font-size: $content-font-size; font-family: $content-font-family; line-height: $content-line-height; a { color: $link-color; text-underline-offset: $underline-offset; } abbr { text-underline-offset: $underline-offset; } a:hover { color: $link-hover-color; } a:active { color: $link-active-color; } a:visited { color: $link-visited-color; } h1, h2, h3 { line-height: 1.2 } header, footer, nav { text-align: $content-alignment; h1 { font-size: $content-font-size; margin-bottom: 1rem; em { margin-left: .5rem; font-weight: normal; } } } header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: $border-thickness solid $fg-color; } footer { margin-top: 2rem; padding-top: 1rem; border-top: $border-thickness solid $fg-color; } nav { margin-top: 1.5rem; a { margin-right: .5rem; border: $border-thickness solid $link-color; border-radius: .5rem; padding: .5rem; text-decoration: none; display: inline-block; } a:last-child { margin-right: 0; } a:hover { border: $border-thickness solid $link-hover-color; } a:active { border: $border-thickness solid $link-active-color; } a:visited { border: $border-thickness solid $link-visited-color; } } main { margin: $content-margin; max-width: $content-width; padding: $content-padding; article { margin-left: 2rem; } nav { text-align: left; } } article { margin: $content-margin; max-width: $content-width; padding: $content-padding; header, footer { text-align: left; margin: 2rem auto; } section { margin: 2rem auto; } header { margin-bottom: 1rem; padding-bottom: 0; border: none; } footer { border-top: $hr-border-thickness dashed $fg-color; } } main, article { h1 { font-size: $content-font-size * 2; } h2 { font-size: $content-font-size * 1.6; } h3 { font-size: $content-font-size * 1.2; } h4, h5, h6 { font-size: $content-font-size * 1.1; } } blockquote { font-size: $blockquote-font-size; margin: 2rem 4rem; padding: 0 1rem; border-left: $border-thickness solid $fg-color; cite { font-style: normal; font-weight: bold; } } figure { font-size: $blockquote-font-size; margin: 2rem 4rem; padding: 1rem; border: $border-thickness solid $fg-color; img { width: 100%; } figcaption { font-style: normal; font-weight: bold; } } dl { dt { font-size: 1.1rem; font-weight: bold; } dd { margin-bottom: 1.1rem; } } hr { border: $hr-border-thickness solid $fg-color; } table { margin: 2rem 0; border-collapse: collapse; border: $border-thickness solid $fg-color; th, td { padding: 1rem; border: $border-thickness solid $fg-color; text-align: left; } } pre, code { font-size: $preformatted-font-size; font-family: $preformatted-font-family; } }
}