Fix tabs, improve setup documentation to be explicit about vscode

[rnaseq-cwl-training.git] / assets / css / lesson.scss

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index 0ef961379304ed58b5599b9a48c1c4fe8ce38935..d19fa2b4f4ac431113e26c963ff2e0f797786f6f 100644 (file)
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -38,51 +38,38 @@ $color-testimonial: #fc8dc1 !default;
     border-radius: 4px 0 0 4px;
 }
 
+// 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.source  { @include cdSetup($color-source); }
-
-div.language-bash     { @include cdSetup($color-source); }
-div.language-c        { @include cdSetup($color-source); }
-div.language-cmake    { @include cdSetup($color-source); }
-div.language-cpp      { @include cdSetup($color-source); }
-div.language-make     { @include cdSetup($color-source); }
-div.language-matlab   { @include cdSetup($color-source); }
-div.language-python   { @include cdSetup($color-source); }
-div.language-r        { @include cdSetup($color-source); }
-div.language-sql      { @include cdSetup($color-source); }
 
 div.error::before,
 div.warning:before,
 div.output::before,
 div.source::before,
-div.language-bash::before,
-div.language-c::before,
-div.language-cmake::before,
-div.language-cpp::before,
-div.language-make::before,
-div.language-matlab::before,
-div.language-python::before,
-div.language-r::before,
-div.language-sql::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.source::before { content: "Code"; }
 
 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-matlab::before { content: "MATLAB"; }
 div.language-python::before { content: "Python"; }
 div.language-r::before      { content: "R"; }
 div.language-sql::before    { content: "SQL"; }
@@ -110,6 +97,28 @@ ul.nav.nav-tabs li a { line-height: 24px; } // or 1.714285716
 // 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.
 //----------------------------------------
@@ -218,6 +227,12 @@ article img {
     max-width: 100%;
 }
 
+li img {
+    display: inline;
+    margin: 3px auto;
+    max-width: 100%;
+}
+
 article h2 {
   margin: 48px 0 16px;
   border-bottom: solid 1px #eaecef;
@@ -307,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.