X-Git-Url: https://git.arvados.org/rnaseq-cwl-training.git/blobdiff_plain/cb2346ee3d382434dfe9c66735981379aa82a6ed..71ace0f4b9d840589768d5289815bdb9756f0721:/assets/css/lesson.scss?ds=sidebyside

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
index 499c4d0..6e9e81e 100644
--- a/assets/css/lesson.scss
+++ b/assets/css/lesson.scss
@@ -29,10 +29,10 @@ $color-testimonial: #fc8dc1 !default;
 //----------------------------------------
 
 @mixin cdSetup($color) {
-  color: $color;
-  border-left: solid 5px $color;
-  margin-bottom: 0px;
-  border-radius: 4px 0 0 4px;
+    color: $color;
+    border-left: solid 5px $color;
+    margin: 15px 0;
+    border-radius: 4px 0 0 4px;
 }
 
 .error  { @include cdSetup($color-error); }
@@ -44,7 +44,7 @@ $color-testimonial: #fc8dc1 !default;
 .matlab, .language-matlab { @include cdSetup($color-source); }
 .python, .language-python { @include cdSetup($color-source); }
 .r, .language-r           { @include cdSetup($color-source); }
-.sql, .langauge-sql       { @include cdSetup($color-source); }
+.sql, .language-sql       { @include cdSetup($color-source); }
 
 .error pre,
 .output pre,
@@ -81,8 +81,11 @@ $codeblock-padding: 5px !default;
   padding-right: 0;
   border: 1px solid;
   border-color: $color;
+  border-radius: 4px;
   padding-bottom: $codeblock-padding;
 
+  margin: 15px 0;
+
   h2 {
     padding-top: $codeblock-padding;
     padding-bottom: $codeblock-padding;
@@ -126,6 +129,10 @@ $codeblock-padding: 5px !default;
 font-size: 18px;
 }
 
+blockquote p {
+    margin: 5px;
+}
+
 //----------------------------------------
 // Override Bootstrap settings.
 //----------------------------------------
@@ -137,16 +144,27 @@ code {
   background-color: #e7e7e7;
 }
 
-img {
+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; }
+
 //----------------------------------------
 // Miscellaneous.
 //----------------------------------------
 
+.figures h2 { margin-top: 100px; }
+
 .maintitle {
   text-align: center;
 }
@@ -158,7 +176,7 @@ img {
 footer .copyright,
 footer .help-links
 {
-    font-size: 18px;
+    font-size: inherit;
     margin-top: 10px;
     margin-bottom: 10px;
     font-weight: 500;
@@ -186,6 +204,37 @@ span.fold-unfold {
 }
 
 
+//----------------------------------------
+// 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.
 //----------------------------------------