X-Git-Url: https://git.arvados.org/rnaseq-cwl-training.git/blobdiff_plain/93aae5665aa1a374b349cc88d54aa1a06f9ad169..3001ab5d4b8a1560a7cef63ef72ca7f8fd2cc6d9:/assets/css/lesson.scss

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index 0c5f86e..53f158f 100644
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -10,8 +10,9 @@ $color-brand:       #2b3990 !default;
 
 // 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;
@@ -29,21 +30,71 @@ $color-testimonial: #fc8dc1 !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); }
+.error   { @include cdSetup($color-error); }
+.warning { @include cdSetup($color-warning); }
+.output  { @include cdSetup($color-output); }
+.source  { @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); }
+.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,
+.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.
@@ -56,13 +107,12 @@ $codeblock-padding: 5px !default;
   $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;
@@ -95,24 +145,80 @@ $codeblock-padding: 5px !default;
 .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; }
+
 code {
+  white-space: nowrap;
   padding: 2px 5px;
-  color: #3d90d9;
+  color: #006cad;
   background-color: #e7e7e7;
 }
 
-img {
-  max-width: 100%;
+samp { hyphens: none; }
+
+dt { margin-top: 20px; }
+dd { margin-left: 2em; }
+
+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;
 }
@@ -121,6 +227,16 @@ img {
   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;
@@ -140,3 +256,56 @@ 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;
+}