Newer
Older
---
---
//----------------------------------------
// Colors.
//----------------------------------------
// branding
$color-brand: #2b3990 !default;
// code boxes
$color-error: #bd2c00 !default;
$color-output: #303030 !default;
$color-source: #6e5494 !default;
// blockquotes
$color-callout: #f4fd9c !default;
$color-challenge: #eec275 !default;
$color-checklist: #dfd2a0 !default;
$color-discussion: #eec275 !default;
$color-keypoints: #7ae78e !default;
$color-objectives: #daee84 !default;
$color-prereq: #9cd6dc !default;
$color-solution: #ded4b9 !default;
$color-testimonial: #fc8dc1 !default;
//----------------------------------------
// Specialized code blocks.
//----------------------------------------
@mixin cdSetup($color) {
}
.error { @include cdSetup($color-error); }
.output { @include cdSetup($color-output); }
.source { @include cdSetup($color-source); }
.bash, .language-bash { @include cdSetup($color-source); }
.make, .language-make { @include cdSetup($color-source); }
.matlab, .language-matlab { @include cdSetup($color-source); }
.python, .language-python { @include cdSetup($color-source); }
.r, .language-r { @include cdSetup($color-source); }
.sql, .language-sql { @include cdSetup($color-source); }
.error::before,
.output::before,
.source::before,
.bash::before, .language-bash::before,
.make::before, .language-make::before,
.matlab::before, .language-matlab::before,
.python::before, .language-python::before,
.r::before, .language-r::before,
.sql::before, .language-sql::before {
background-color: #f2eff6;
display: block;
font-weight: bold;
padding: 5px 10px;
.error::before { background-color: #ffebe6; content: "Error"; }
.output::before { background-color: #efefef; content: "Output"; }
.source::before { content: "Code"; }
.bash::before, .language-bash::before { content: "Bash"; }
.make::before, .language-make::before { content: "Make"; }
.matlab::before, .language-matlab::before { content: "Matlab"; }
.python::before, .language-python::before { content: "Python"; }
.r::before, .language-r::before { content: "R"; }
.sql::before, .language-sql::before { content: "SQL"; }
//----------------------------------------
// Specialized blockquote environments for learning objectives, callouts, etc.
//----------------------------------------
$codeblock-padding: 5px !default;
@mixin bkSetup($color, $glyph) {
$gradientcolor1: $color;
$gradientcolor2: scale-color($color, $lightness: 10%);
padding: 0 0 $codeblock-padding $codeblock-padding;
border: 1px solid;
border-color: $color;
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
h2 {
padding-top: $codeblock-padding;
padding-bottom: $codeblock-padding;
font-size: 20px;
background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
border-color: $color;
margin-top: 0px;
margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
}
h2:before {
font-family: 'Glyphicons Halflings';
content: $glyph;
float: left;
padding-left: $codeblock-padding;
padding-right: $codeblock-padding;
display: inline-block;
-webkit-font-smoothing: antialiased;
}
}
.callout{ @include bkSetup($color-callout, "\e146"); }
.challenge{ @include bkSetup($color-challenge, "\270f"); }
.checklist{ @include bkSetup($color-checklist, "\e067"); }
.discussion{ @include bkSetup($color-discussion, "\e123"); }
.keypoints{ @include bkSetup($color-keypoints, "\e101"); }
.objectives{ @include bkSetup($color-objectives, "\e085"); }
.prereq{ @include bkSetup($color-prereq, "\e124"); }
.solution{ @include bkSetup($color-solution, "\e105"); }
.testimonial{ @include bkSetup($color-testimonial, "\e143"); }
.callout h3,
.challenge h3,
.checklist h3,
.discussion h3,
.keypoints h3,
.objectives h3,
.prereq h3,
.solution h3,
.testimonial h3 {
font-size: 18px;
}
.challenge { background-color: #eec27520; }
.callout { background-color: #f4fd9c20; }
.challenge { background-color: #eec27520; }
.checklist { background-color: #dfd2a020; }
.discussion { background-color: #eec27520; }
.keypoints { background-color: #7ae78e20; }
.objectives { background-color: #daee8420; }
.prereq { background-color: #9cd6dc20; }
.solution { background-color: #ded4b94d; }
.testimonial { background-color: #fc8dc120; }
blockquote p {
margin: 5px;
}
//----------------------------------------
// Override Bootstrap settings.
//----------------------------------------
code {
article h2 {
margin: 48px 0 16px;
border-bottom: solid 1px #eaecef;
padding-bottom: 0.3em;
line-height: 1.25;
}
article h3 { margin: 40px 0 16px; }
//----------------------------------------
// Miscellaneous.
//----------------------------------------
.figures h2 { margin-top: 100px; }
.maintitle {
text-align: center;
}
.footertext {
text-align: center;
}
footer .copyright,
footer .help-links
{
margin-top: 10px;
margin-bottom: 10px;
font-weight: 500;
line-height: 1.1;
}
img.navbar-logo {
height: 40px; // synchronize with height of navbar
padding-top: 5px;
padding-right: 10px;
}
div.branding {
color: $color-brand;
}
ul,
ol {
}
span.fold-unfold {
margin-left: 1em;
opacity: 0.5;
}
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
//----------------------------------------
// Life cycle box
//----------------------------------------
div.life-cycle {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 100;
font-size: 1.2em;
text-align: center;
margin-bottom: -1px;
border-radius: 0;
}
.pre-alpha {
color: #a94442;
background: #f2dede;
}
.alpha {
color: #8a6d3b;
background: #fcf8e3;
}
.beta {
color: #31708f;
background: #d9edf7;
}
//----------------------------------------
// keyboard key style, from StackExchange.
//----------------------------------------
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
white-space: nowrap;
font-style: normal;
}