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) {
color: $color;
border-left: solid 5px $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 pre,
.output pre,
.source pre,
.bash pre,
border-radius: 0 4px 4px 0;
}
//----------------------------------------
// 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-left: $codeblock-padding;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
border: 1px solid;
border-color: $color;
89
90
91
92
93
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
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 {
padding: 2px 5px;
color: #3d90d9;
background-color: #e7e7e7;
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;
}
218
219
220
221
222
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
//----------------------------------------
// 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;
}