X-Git-Url: https://git.arvados.org/rnaseq-cwl-training.git/blobdiff_plain/522d98d044d9ca3a213a51022bae85856fef2c04..1b65f91214e61a755671475db8e0de708d7ed27b:/assets/css/lesson.scss

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index 9b000a1..d19fa2b 100644
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -10,11 +10,13 @@ $color-brand:       #2b3990 !default;
 
 // code boxes
 $color-error:       #bd2c00 !default;
+$color-warning:     #cda01d !default;
 $color-output:      #303030 !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;
@@ -30,48 +32,92 @@ $color-testimonial: #fc8dc1 !default;
 
 @mixin cdSetup($color) {
     color: $color;
-    border: solid 0.5px $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;
+// Generic setup. Has to come before .error, .warning, and .output
+div[class^='language-'] { @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
 }
 
-.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"; }
+// 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.
@@ -113,6 +159,7 @@ $codeblock-padding: 5px !default;
 }
 
 .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"); }
@@ -148,24 +195,44 @@ font-size: 18px;
 blockquote p {
     margin: 5px;
 }
+blockquote :not(h2) + p {
+    padding-top: 1em;
+}
 
 //----------------------------------------
 // Override Bootstrap settings.
 //----------------------------------------
 
+blockquote { font-size: inherit; }
+
+a code {
+  color: #006cad;
+}
+
 code {
   white-space: nowrap;
   padding: 2px 5px;
-  color: #006cad;
+  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;
@@ -194,7 +261,7 @@ article pre {
   text-align: center;
 }
 
-footer .copyright,
+footer .license,
 footer .help-links
 {
     font-size: inherit;
@@ -255,6 +322,12 @@ div.life-cycle {
     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.