// code boxes
$color-error: #bd2c00 !default;
+$color-warning: #cda01d !default;
$color-output: #303030 !default;
-$color-source: #6e5494 !default;
+$color-source: #360084 !default;
// blockquotes
$color-callout: #f4fd9c !default;
@mixin cdSetup($color) {
color: $color;
+ border: solid 1px $color;
border-left: solid 5px $color;
- margin: 15px 0;
+ 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); }
+.error { @include cdSetup($color-error); }
+.warning { @include cdSetup($color-warning); }
+.output { @include cdSetup($color-output); }
+.source { @include cdSetup($color-source); }
.bash, .language-bash { @include cdSetup($color-source); }
.make, .language-make { @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,
-.language-bash pre,
-.make pre,
-.language-make pre,
-.matlab pre,
-.language-matlab pre,
-.python pre,
-.language-python pre,
-.r pre,
-.language-r pre,
-.sql pre ,
-.language-sql pre {
- border-radius: 0 4px 4px 0;
+.error::before,
+.warning: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"; }
+.warning:before { background-color: #f8f4e8; content:" Warning"; }
+.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"; }
+
+// Tab panels are used on Setup pages to show instructions for different Operating Systems
+.tab-pane {
+ border: solid 1px #ddd; // #ddd == @nav-tabs-active-link-hover-border-color
+ border-top: none;
+ padding: 20px 20px 10px 20px;
+ border-radius: 0 0 4px 4px; // 4px == @border-radius-base
}
+// Stripe above tab panels where OS tabs are shown
+ul.nav.nav-tabs {
+ background: #E1E1E1;
+ border-radius: 4px 4px 0 0; // 4px == @border-radius-base
+}
+
+// This color provides better contrast ratio on most backgrounds used on Carpentries websites
+// 9.24 on FFFFFF: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=FFFFFF&api (body)
+// 8.78 on F9F9F9: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=F9F9F9&api (tables)
+// 7.07 on E1E1E1: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=E1E1E1&api (tab panels)
+a { color: #204A6F; }
+
//----------------------------------------
// Specialized blockquote environments for learning objectives, callouts, etc.
//----------------------------------------
$gradientcolor1: $color;
$gradientcolor2: scale-color($color, $lightness: 10%);
- padding-left: $codeblock-padding;
- padding-top: 0;
- padding-bottom: 0;
- padding-right: 0;
+ padding: 0 0 $codeblock-padding $codeblock-padding;
border: 1px solid;
border-color: $color;
border-radius: 4px;
- padding-bottom: $codeblock-padding;
- margin: 15px 0;
+ margin: 15px 5px 10px 0;
h2 {
padding-top: $codeblock-padding;
blockquote p {
margin: 5px;
}
+blockquote :not(h2) + p {
+ padding-top: 1em;
+}
//----------------------------------------
// Override Bootstrap settings.
//----------------------------------------
+blockquote { font-size: inherit; }
+
code {
white-space: nowrap;
padding: 2px 5px;
background-color: #e7e7e7;
}
+samp { hyphens: none; }
+
+dt { margin-top: 20px; }
+dd { margin-left: 2em; }
+
article img {
display: block;
margin: 20px auto;
article h3 { margin: 40px 0 16px; }
+article pre {
+ margin: 0;
+ border: 0;
+}
+
//----------------------------------------
// Miscellaneous.
//----------------------------------------