assets/css/lesson.scss

   1 ---
   2 ---
   3
   4 //----------------------------------------
   5 // Colors.
   6 //----------------------------------------
   7
   8 // branding
   9 $color-brand:       #2b3990 !default;
  10
  11 // code boxes
  12 $color-error:       #bd2c00 !default;
  13 $color-output:      #303030 !default;
  14 $color-source:      #6e5494 !default;
  15
  16 // blockquotes
  17 $color-callout:     #f4fd9c !default;
  18 $color-challenge:   #eec275 !default;
  19 $color-checklist:   #dfd2a0 !default;
  20 $color-discussion:  #eec275 !default;
  21 $color-keypoints:   #7ae78e !default;
  22 $color-objectives:  #daee84 !default;
  23 $color-prereq:      #9cd6dc !default;
  24 $color-solution:    #ded4b9 !default;
  25 $color-testimonial: #fc8dc1 !default;
  26
  27 //----------------------------------------
  28 // Specialized code blocks.
  29 //----------------------------------------
  30
  31 @mixin cdSetup($color) {
  32   color: $color;
  33   border-left: solid 5px $color;
  34   margin-bottom: 0px;
  35 }
  36
  37 .error  { @include cdSetup($color-error); }
  38 .output { @include cdSetup($color-output); }
  39 .source { @include cdSetup($color-source); }
  40
  41 .bash   { @include cdSetup($color-source); }
  42 .make   { @include cdSetup($color-source); }
  43 .matlab { @include cdSetup($color-source); }
  44 .python { @include cdSetup($color-source); }
  45 .r      { @include cdSetup($color-source); }
  46 .sql    { @include cdSetup($color-source); }
  47
  48 //----------------------------------------
  49 // Specialized blockquote environments for learning objectives, callouts, etc.
  50 //----------------------------------------
  51
  52 $codeblock-padding: 5px !default;
  53
  54 @mixin bkSetup($color, $glyph) {
  55
  56   $gradientcolor1: $color;
  57   $gradientcolor2: scale-color($color, $lightness: 10%);
  58
  59   padding-left: $codeblock-padding;
  60   padding-top: 0;
  61   padding-bottom: 0;
  62   padding-right: 0;
  63   border: 1px solid;
  64   border-color: $color;
  65   padding-bottom: $codeblock-padding;
  66
  67   h2 {
  68     padding-top: $codeblock-padding;
  69     padding-bottom: $codeblock-padding;
  70     font-size: 20px;
  71     background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
  72     border-color: $color;
  73     margin-top: 0px;
  74     margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
  75   }
  76   h2:before {
  77     font-family: 'Glyphicons Halflings';
  78     content: $glyph;
  79     float: left;
  80     padding-left: $codeblock-padding;
  81     padding-right: $codeblock-padding;
  82     display: inline-block;
  83     -webkit-font-smoothing: antialiased;
  84   }
  85
  86 }
  87
  88 .callout{ @include bkSetup($color-callout, "\e146"); }
  89 .challenge{ @include bkSetup($color-challenge, "\270f"); }
  90 .checklist{ @include bkSetup($color-checklist, "\e067"); }
  91 .discussion{ @include bkSetup($color-discussion, "\e123"); }
  92 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
  93 .objectives{ @include bkSetup($color-objectives, "\e085"); }
  94 .prereq{ @include bkSetup($color-prereq, "\e124"); }
  95 .solution{ @include bkSetup($color-solution, "\e105"); }
  96 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
  97
  98 //----------------------------------------
  99 // Override Bootstrap settings.
 100 //----------------------------------------
 101
 102 code {
 103   padding: 2px 5px;
 104   color: #3d90d9;
 105   background-color: #e7e7e7;
 106 }
 107
 108 img {
 109   max-width: 100%;
 110 }
 111
 112 //----------------------------------------
 113 // Miscellaneous.
 114 //----------------------------------------
 115
 116 .maintitle {
 117   text-align: center;
 118 }
 119
 120 .footertext {
 121   text-align: center;
 122 }
 123
 124 img.navbar-logo {
 125   height: 40px; // synchronize with height of navbar
 126   padding-top: 5px;
 127   padding-right: 10px;
 128 }
 129
 130 div.branding {
 131   color: $color-brand;
 132 }
 133
 134 ul,
 135 ol {
 136   padding-left: 2em;
 137 }
 138
 139 span.fold-unfold {
 140   margin-left: 1em;
 141   opacity: 0.5;
 142 }