$blockquote: $type-border !default; $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; // Fonts .heading { font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; } .sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; } .serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; } .mono { font-family: $mono; } body > header h1 { font-size: 3em; @extend .heading; font-weight: normal; line-height: 1.2em; margin-bottom: 0.6667em; } 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: 3.2em; line-height: 1.2em; @media only screen and (max-width: 768px) { font-size: 2.2em; } } h2, section h1 { font-size: 1.5em; } h3, section h2, section section h1 { font-size: 1.3em; } h4, section h3, section section h2, section section section h1 { font-size: 1em; } h5, section h4, section section h3 { font-size: .9em; } h6, section h5, section section h4, section section section h3 { font-size: .8em; } p, blockquote, ul, ol { margin-bottom: 1.5em; } ul{ list-style-type: disc; } ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } } ul ul, ol ol { margin-left: 1.75em; } strong { font-weight: bold; } em { font-style: italic; } sup, sub { font-size: 0.8em; position: relative; display: inline-block; } 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-font; } 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; margin-left: $bq-margin; > p { &:first-child:before { content: "\201C"; position: absolute; top: 0.1em; left: -.5em; font-size: 3em; color: $blockquote; } &:last-child:after { content: "\201D"; position: relative; top: 0.3em; line-height: 0; font-size: 2em; color: $blockquote; } } + p > cite { margin-left: $bq-margin; text-align: right; &:before { content: '– '; color: $text-color-light; } a { font-style: italic; } } } .has-pullquote: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; }