--- --- //---------------------------------------- // Colors. //---------------------------------------- // branding $color-brand: #2b3990 !default; // code boxes $color-error: #bd2c00 !default; $color-output: #303030 !default; $color-source: #360084 !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: solid 1px $color; border-left: solid 5px $color; margin: 15px 5px 10px 0; border-radius: 4px 0 0 4px; } .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; border-radius: 4px; margin: 15px 5px 10px 0; 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 { white-space: nowrap; padding: 2px 5px; color: #006cad; background-color: #e7e7e7; } article img { display: block; margin: 20px auto; max-width: 100%; } 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; } article pre { margin: 0; border: 0; } //---------------------------------------- // Miscellaneous. //---------------------------------------- .figures h2 { margin-top: 100px; } .maintitle { text-align: center; } .footertext { text-align: center; } footer .copyright, footer .help-links { font-size: inherit; 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 { padding-left: 2em; } span.fold-unfold { margin-left: 1em; opacity: 0.5; } //---------------------------------------- // 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. //---------------------------------------- kbd { 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; }