Use darker purple for code blocks

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

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index 6e9e81ea24fc38d6cfb41e07ca150de278e1499c..9b000a1c06e320e9dc27bbb0b7778a041a2bce0b 100644 (file)
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -11,7 +11,7 @@ $color-brand:       #2b3990 !default;
 // code boxes
 $color-error:       #bd2c00 !default;
 $color-output:      #303030 !default;
-$color-source:      #6e5494 !default;
+$color-source:      #360084 !default;
 
 // blockquotes
 $color-callout:     #f4fd9c !default;
@@ -30,8 +30,9 @@ $color-testimonial: #fc8dc1 !default;
 
 @mixin cdSetup($color) {
     color: $color;
+    border: solid 0.5px $color;
     border-left: solid 5px $color;
-    margin: 15px 0;
+    margin: 15px 5px 10px 0;
     border-radius: 4px 0 0 4px;
 }
 
@@ -46,24 +47,32 @@ $color-testimonial: #fc8dc1 !default;
 .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,
+.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"; }
+.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"; }
+
+
 //----------------------------------------
 // Specialized blockquote environments for learning objectives, callouts, etc.
 //----------------------------------------
@@ -75,16 +84,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;
   border-radius: 4px;
-  padding-bottom: $codeblock-padding;
 
-  margin: 15px 0;
+  margin: 15px 5px 10px 0;
 
   h2 {
     padding-top: $codeblock-padding;
@@ -129,6 +134,17 @@ $codeblock-padding: 5px !default;
 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;
 }
@@ -140,7 +156,7 @@ blockquote p {
 code {
   white-space: nowrap;
   padding: 2px 5px;
-  color: #3d90d9;
+  color: #006cad;
   background-color: #e7e7e7;
 }
 
@@ -159,6 +175,11 @@ article h2 {
 
 article h3 { margin: 40px 0 16px; }
 
+article pre {
+    margin: 0;
+    border: 0;
+}
+
 //----------------------------------------
 // Miscellaneous.
 //----------------------------------------