145 lines
3.1 KiB
SCSS
145 lines
3.1 KiB
SCSS
$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: 2.2em;
|
||
@extend .heading;
|
||
font-weight: normal;
|
||
line-height: 1.2em;
|
||
margin-bottom: 0.6667em;
|
||
}
|
||
|
||
body {
|
||
line-height: 1.5em;
|
||
color: $text-color;
|
||
@extend .serif;
|
||
}
|
||
h1 {
|
||
font-size: 2.2em;
|
||
line-height: 1.2em;
|
||
}
|
||
|
||
@media only screen and (min-width: 992px) {
|
||
body { font-size: 1.15em; }
|
||
h1 { font-size: 2.6em; line-height: 1.2em; }
|
||
}
|
||
|
||
#{headings()}{
|
||
@extend .heading;
|
||
text-rendering: optimizelegibility;
|
||
margin-bottom: 1em;
|
||
font-weight: bold;
|
||
}
|
||
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;
|
||
ul { list-style-type: circle;
|
||
ul { list-style-type: square; }}}
|
||
|
||
ol { list-style-type: decimal;
|
||
ol { list-style-type: lower-alpha;
|
||
ol { list-style-type: lower-roman; }}}
|
||
|
||
ul, ol { &, ul, ol { margin-left: 1.3em; }}
|
||
|
||
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;
|
||
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: '–'; padding:{right: .3em; left: .3em;} color: $text-color-light; }
|
||
}
|
||
@media only screen and (min-width: 992px) {
|
||
padding-left: 1.5em;
|
||
border-left-width: 4px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
/* @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;
|
||
}
|