156 lines
3.4 KiB
SCSS
156 lines
3.4 KiB
SCSS
$type-border: #ddd;
|
||
$type-color-light: #555;
|
||
$type-color: #000;
|
||
$blockquote: $type-border !default; //darken($type-border, 20) !default;
|
||
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
|
||
|
||
// Fonts
|
||
@include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" );
|
||
.heading { font-family: Adelle, "Helvetica Neue", Arial, sans-serif; }
|
||
.sans { font-family: "Helvetica Neue", Arial, sans-serif; }
|
||
.mono { font-family: $mono; }
|
||
|
||
body > header h1 {
|
||
font-size: 3em;
|
||
@extend .heading;
|
||
line-height: 1.2em;
|
||
margin-bottom: 0.6667em;
|
||
}
|
||
|
||
|
||
body {
|
||
font-size: 1em;
|
||
line-height: 1.5em;
|
||
color: $type-color;
|
||
font-family: Georgia, Times, serif;
|
||
}
|
||
|
||
article {
|
||
&:last-child { border-bottom: none; }
|
||
h2 {
|
||
padding-top: 0.8em;
|
||
border-top: 3px double $type-border;
|
||
}
|
||
.byline + time:before, .byline + time +time:before {
|
||
content: "\2022 ";
|
||
padding: 0 .3em 0 .2em;
|
||
display: inline-block;
|
||
@include opacity(.5);
|
||
}
|
||
time span {
|
||
font-size: .7em;
|
||
line-height: 0;
|
||
position: relative;
|
||
top: -.4em;
|
||
}
|
||
header {
|
||
p {
|
||
padding: 0 0 1.5em;
|
||
font-size: .8em;
|
||
color: $type-color-light;
|
||
font-family: Palatino, Times, "Times New Roman";
|
||
margin-top: -1.4em;
|
||
}
|
||
}
|
||
}
|
||
|
||
#{headings()}{
|
||
@extend .heading; font-weight: normal;
|
||
line-height: 1em;
|
||
text-rendering: optimizelegibility;
|
||
}
|
||
h1 {
|
||
font-size: 2.6em;
|
||
margin-bottom: 0.6667em;
|
||
}
|
||
h2, section h1 {
|
||
font-size: 1.8em;
|
||
margin-bottom: 0.6667em;
|
||
}
|
||
h3, section h2, section section h1 {
|
||
font-size: 1.6em;
|
||
margin-bottom: 0.875em;
|
||
}
|
||
h4, section h3, section section h2, section section section h1 {
|
||
font-size: 1.3em;
|
||
margin-bottom: 0.875em;
|
||
}
|
||
h5, section h4, section section h3 {
|
||
font-size: 1.1em;
|
||
margin-bottom: 0.75em;
|
||
}
|
||
h6, section h5, section section h4, section section section h3 {
|
||
font-size: 1em;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
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; }
|
||
|
||
li { margin-bottom: .5em; }
|
||
|
||
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: 2em;
|
||
font-style: italic;
|
||
position: relative;
|
||
margin-left: $bq-margin;
|
||
> p {
|
||
&:first-child:before {
|
||
content: "\201C";
|
||
position: absolute;
|
||
top: 0.1em;
|
||
left: -.7em;
|
||
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: $type-color-light; }
|
||
a { font-style: italic; }
|
||
}
|
||
}
|