Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
411 lines (338 sloc) 6.56 KB
/*!
* You are looking at the compiled version of the CSS
*
* You can view the source Sass file here:
* https://github.com/Kaelig/Sass-reference/blob/master/s.scss
*/
// Hmmm, Sassy!
$hopbush: #c69;
$pale-sky: #6b717f;
$midnight-blue: #036;
$dawn-pink: #f2ece4;
$nebula: #d2e1dd;
$font-color: darken($pale-sky, 15);
$serif-font-stack: IowanOldStyle-Roman, Georgia, serif;
$link-color: #669999;
$link-hover-color: $midnight-blue;
$link-active-color: darken($link-color, 25%);
$link-visited-color: lighten($link-color, 10%);
$link-focus-color: darken($link-color, 15%);
@import 'reset';
body {
font-family: sans-serif;
line-height: 1.4;
margin: 0;
padding-left: 16px;
padding-right: 16px;
// Prevent Webkit and Windows Mobile platforms from changing default font sizes.
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
border-top: 4px solid $hopbush;
@media (max-width : 750px) {
padding-top: .5em;
padding-bottom: .5em;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: $serif-font-stack;
font-weight: normal;
color: #3c3c3c; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
margin: 0; }
h1 {
font-size: 3em;
line-height: 1;
margin-bottom: 0.50em; }
h2 {
font-size: 2em;
margin-bottom: 0.75em; }
h3 {
font-size: 1.5em;
line-height: 1;
margin-bottom: 1.00em; }
h4 {
font-size: 1.2em;
line-height: 1.25;
margin-bottom: 1.25em; }
h5 {
font-size: 1em;
font-weight: bold;
margin-bottom: 1.50em; }
h6 {
font-size: 1em;
font-weight: bold; }
p {
margin: 0 0 1.5em; }
p .left {
float: left;
margin: 1.5em 1.5em 1.5em 0;
padding: 0; }
p .right {
float: right;
margin: 1.5em 0 1.5em 1.5em;
padding: 0; }
a {
color: $link-color;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
&:visited {
color: $link-visited-color; }
&:focus {
color: $link-focus-color; }
&:hover {
color: $link-hover-color; }
&:active {
color: $link-active-color; }
}
blockquote {
margin: 1.5em;
color: #666666;
font-style: italic; }
strong, dfn {
font-weight: bold; }
em, dfn {
font-style: italic; }
sup, sub {
line-height: 0; }
abbr, acronym {
border-bottom: 1px dotted #666666; }
address {
margin: 0 0 1.5em;
font-style: italic; }
del {
color: #666666; }
pre {
margin: 1.5em 0;
white-space: pre; }
pre, code, tt {
font: 1em Monaco, "andale mono", "lucida console", monospace;
line-height: 1.5; }
li ul, li ol {
margin: 0; }
ul, ol {
margin: 0 1.5em 1.5em 0;
padding-left: 1.5em; }
ul {
list-style-type: disc; }
ol {
list-style-type: decimal; }
dl {
margin: 0 0 1.5em 0; }
dl dt {
font-weight: bold; }
dd {
margin-left: 1.5em; }
table {
margin-bottom: 1.4em;
width: 100%; }
th {
font-weight: bold; }
thead th {
background: #c3d9ff; }
th, td, caption {
padding: 4px 10px 4px 5px; }
table.striped tr:nth-child(even) td,
table tr.even td {
background: #e5ecf9; }
tfoot {
font-style: italic; }
caption {
background: #eeeeee; }
.quiet, #intro, #footer {
color: gray; }
.loud {
color: #2b2b2b; }
small, .small {
font-size: .75em;
line-height: 1.5em; }
#content {
max-width: 1337px;
}
$toc-width: 220px;
#bsd-toc {
float: left;
width: $toc-width;
background: lighten($nebula, 10%);
position: relative;
padding: 1em 1em 1.33em 1.33em;
margin-right: 2em;
@media (max-width : 750px) {
float: none;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
ul {
list-style-type: none;
}
> ul > li {
margin-bottom: 1em;
}
> ul > li > ul > li {
margin-top: .125em;
}
ul {
font-size: .925em;
margin: 0;
padding: 0;
font-weight: bold;
a {
color: darken($link-color, 5%);
&:focus,
&:hover {
color: darken($link-color, 1%);
}
&:active {
color: darken($link-color, 5%);
}
}
ul {
padding-left: .5em;
a {
font-weight: normal;
color: $font-color;
&:focus,
&:hover {
color: $font-color;
}
&:active {
color: darken($link-color, 5%);
}
}
ul ul {
font-size: 1em;
}
}
}
}
#filecontents {
padding-right: 2em;
@media (max-width : 750px) {
padding-right: 0;
}
}
#bsd-body {
overflow: hidden;
a {
border-bottom: 1px solid rgba(0, 0, 0, .1);
&:hover,
&:focus {
text-decoration: none;
border-bottom-color: rgba(0, 0, 0, .3);
}
}
// Inline and block code styles
code,
pre {
padding: 0 3px 2px;
font-family: Monaco, Andale Mono, Courier New, monospace;
border-radius: 3px;
}
code {
background-color: lighten($dawn-pink, 3%);
color: rgba(0, 0, 0, .75);
padding: 1px 3px;
}
pre {
background-color: lighten($dawn-pink, 7%);
display: block;
padding: 1em;
margin: 0 0 1.5em;
line-height: 1.5em;
font-size: 1em;
border: 1px solid darken($dawn-pink, 4%);
code {
background: transparent;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
}
}
#intro {
@extend .quiet;
font-size: 1.2em;
min-height: 280px;
margin-top: 1.5em;
img {
display: block;
margin: 1em auto;
max-width: 290px;
}
@media (min-width : 751px) {
margin-top: 11px;
img {
width: 290px;
max-width: 30%;
float: right;
margin-top: 0;
}
}
}
h2,
h3 {
margin-top: 2em;
}
h2 {
border-top: 2px solid #eee;
}
h4 {
font-weight: bold;
color: #777;
}
// This is the title
#sass_syntactically_awesome_stylesheets {
padding: 1.5em .5em .75em 290px;
margin-bottom: 0;
@media (max-width: 750px) {
font-size: 1.5em;
padding-left: 0;
}
}
// Highlight headings when reached through the anchor-based navigation
:target {
background: rgba($hopbush, .3);
outline: 8px solid rgba($hopbush, .3);
}
#footer {
@extend .quiet;
border-top: 1px solid #D2D2D2;
box-shadow: #F0F0F0 0 1px 0 inset;
font-size: .75em;
padding: 2em 2em 2em $toc-width + 70px;
h2 {
font-size: 1.3em;
border-top: 0;
}
@media (max-width : 750px) {
padding-left: 0;
}
}
.btn {
display: inline-block;
background-color: $hopbush;
padding: 5px 14px 6px;
margin-bottom: .2em;
font-size: .875em;
line-height: normal;
font-family: $serif-font-stack;
&,
&:link,
&:visited {
color: #fff;
}
&:hover,
&:focus {
background-color: lighten($hopbush, 5%);
text-decoration: none;
}
&:active {
background-color: darken($hopbush, 10%);
}
}
@import 'prism';