// 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;
+$color-caution: #cf000e !default;
$color-challenge: #eec275 !default;
$color-checklist: #dfd2a0 !default;
$color-discussion: #eec275 !default;
//----------------------------------------
@mixin cdSetup($color) {
- color: $color;
- border-left: solid 5px $color;
- margin-bottom: 0px;
+ 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); }
+// Generic setup. Has to come before .error, .warning, and .output
+div[class^='language-'] { @include cdSetup($color-source); }
-.bash { @include cdSetup($color-source); }
-.make { @include cdSetup($color-source); }
-.matlab { @include cdSetup($color-source); }
-.python { @include cdSetup($color-source); }
-.r { @include cdSetup($color-source); }
-.sql { @include cdSetup($color-source); }
+div.source { @include cdSetup($color-source); }
+div.error { @include cdSetup($color-error); }
+div.warning { @include cdSetup($color-warning); }
+div.output { @include cdSetup($color-output); }
+
+div.error::before,
+div.warning:before,
+div.output::before,
+div.source::before,
+div[class^='language-']::before {
+ background-color: #f2eff6;
+ display: block;
+ font-weight: bold;
+ padding: 5px 10px;
+}
+
+div[class^='language-']::before,
+div.source::before { content: "Code"; }
+
+div.error::before { background-color: #ffebe6; content: "Error"; }
+div.warning:before { background-color: #f8f4e8; content:" Warning"; }
+div.output::before { background-color: #efefef; content: "Output"; }
+
+div.language-bash::before { content: "Bash"; }
+div.language-c::before { content: "C"; }
+div.language-cmake::before { content: "CMake"; }
+div.language-cpp::before { content: "C++"; }
+div.language-make::before { content: "Make"; }
+div.language-matlab::before { content: "MATLAB"; }
+div.language-python::before { content: "Python"; }
+div.language-r::before { content: "R"; }
+div.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
+}
+
+// adjust line height of links so that clickable area (of OS tabs) is 44px high
+ul.nav.nav-tabs li a { line-height: 24px; } // or 1.714285716
+
+// 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; }
+
+// .yt-wrapper2 can be used for limiting maximum width of YouTube iframes only
+.yt-wrapper2 { max-width: 100%; margin: 0 auto; }
+
+// Use full width on small displays
+@media only screen and (max-width: 600px) { .yt-wrapper2 { max-width: 100%; } }
+
+.yt-wrapper {
+ height: 0;
+ margin-top: 10px;
+ padding-bottom: 56.25%;
+ position: relative;
+ width: 100%;
+}
+
+.yt-frame {
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
//----------------------------------------
// 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;
- padding-bottom: $codeblock-padding;
+ border-radius: 4px;
+
+ margin: 15px 5px 10px 0;
h2 {
padding-top: $codeblock-padding;
}
.callout{ @include bkSetup($color-callout, "\e146"); }
+.caution{ @include bkSetup($color-caution, "\e107"); }
.challenge{ @include bkSetup($color-challenge, "\270f"); }
.checklist{ @include bkSetup($color-checklist, "\e067"); }
.discussion{ @include bkSetup($color-discussion, "\e123"); }
.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;
+}
+blockquote :not(h2) + p {
+ padding-top: 1em;
+}
+
//----------------------------------------
// Override Bootstrap settings.
//----------------------------------------
+blockquote { font-size: inherit; }
+
+a code {
+ color: #006cad;
+}
+
code {
- padding: 0 0;
- color: inherit;
- background-color: inherit;
+ white-space: nowrap;
+ padding: 2px 5px;
+ color: #24292e;
+ background-color: #e7e7e7;
+}
+
+samp { hyphens: none; }
+
+dt { margin-top: 20px; }
+dd { margin-left: 2em; }
+
+article img {
+ display: block;
+ margin: 20px auto;
+ max-width: 100%;
+}
+
+li img {
+ display: inline;
+ margin: 3px auto;
+ max-width: 100%;
+}
+
+article h2 {
+ margin: 48px 0 16px;
+ border-bottom: solid 1px #eaecef;
+ padding-bottom: 0.3em;
+ line-height: 1.25;
}
-img {
- max-width: 100%;
+article h3 { margin: 40px 0 16px; }
+
+article pre {
+ margin: 0;
+ border: 0;
}
//----------------------------------------
// Miscellaneous.
//----------------------------------------
+.figures h2 { margin-top: 100px; }
+
.maintitle {
text-align: center;
}
text-align: center;
}
+footer .license,
+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;
ul,
ol {
- padding-left: 1em;
+ 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;
+}
+
+// Remove border around spans of text within code blocks
+// that the highlighter (rouge) failed to recognize.
+pre.highlight span.err {
+ border: none;
+}
+
+
+//----------------------------------------
+// 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;
+}
projects / rnaseq-cwl-training.git / blobdiff