$blockquote: $type-border !default; $sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; $serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; $heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; $header-title-font-family: $heading-font-family !default; $header-subtitle-font-family: $heading-font-family !default; $h1: 2.2em !default; $h2: 1.5em !default; $h3: 1.3em !default; $h4: 1em !default; $h5: .9em !default; $h6: .8em !default; // Fonts .heading { font-family: $heading-font-family; } .sans { font-family: $sans; } .serif { font-family: $serif; } .mono { font-family: $mono; } body > header h1 { font-size: $h1; @extend .heading; font-family: $header-title-font-family; font-weight: normal; line-height: 1.2em; margin-bottom: 0.6667em; } body > header h2 { font-family: $header-subtitle-font-family; } body { line-height: 1.5em; color: $text-color; @extend .serif; } #{headings()}{ @extend .heading; text-rendering: optimizelegibility; margin-bottom: 1em; font-weight: bold; } h1 { font-size: $h1; line-height: 1.2em; } h2, section h1 { font-size: $h2; } h3, section h2, section section h1 { font-size: $h3; } h4, section h3, section section h2, section section section h1 { font-size: $h4; } h5, section h4, section section h3 { font-size: $h5; } h6, section h5, section section h4, section section section h3 { font-size: $h6; } @media only screen and (min-width: 992px) { body { font-size: 1.15em; } } p, blockquote, ul, ol { margin-bottom: 1.5em; } ul { list-style-type: disc; ul { list-style-type: circle; margin-bottom: 0px; ul { list-style-type: square; margin-bottom: 0px; }}} ol { list-style-type: decimal; ol { list-style-type: lower-alpha; margin-bottom: 0px; ol { list-style-type: lower-roman; margin-bottom: 0px; }}} ul, ol { &, ul, ol { margin-left: 1.3em; }} strong { font-weight: bold; } em { font-style: italic; } sup, sub { vertical-align: baseline; font-size: 0.8em; position: relative; } sup { top: -.5em; } sub { bottom: -.5em; } q { font-style: italic; &:before { content: "\201C"; } &:after { content: "\201D"; } } em, dfn { font-style: italic; } strong, dfn { font-weight: bold; } del, s { text-decoration: line-through; } abbr, acronym { border-bottom: 1px dotted; cursor: help; } pre, code, tt { @extend .mono; } sub, sup { line-height: 0; } hr { margin-bottom: 0.2em; } small { font-size: .8em; } big { font-size: 1.2em; } blockquote { $bq-margin: 1.2em; font-style: italic; position: relative; font-size: 1.2em; line-height: 1.5em; padding-left: 1em; border-left: 4px solid rgba($text-color-light, .5); cite { font-style: italic; a { color: $text-color-light !important; word-wrap: break-word; } &:before { content: '\2014'; padding:{right: .3em; left: .3em;} color: $text-color-light; } } @media only screen and (min-width: 992px) { padding-left: 1.5em; border-left-width: 4px; } } .pullquote-right:before, .pullquote-left:before { /* Reset metrics. */ padding: 0; border: none; /* Content */ content: attr(data-pullquote); /* Pull out to the right, modular scale based margins. */ float: right; width: 45%; margin: .5em 0 1em 1.5em; /* Baseline correction */ position: relative; top: 7px; font-size: 1.4em; line-height: 1.45em; } .pullquote-left:before { /* Make left pullquotes align properly. */ float: left; margin: .5em 1.5em 1em 0; } /* @extend this to force long lines of continuous text to wrap */ .force-wrap { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }