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: 15px 0;
  35     border-radius: 4px 0 0 4px;
  36 }
  37
  38 .error  { @include cdSetup($color-error); }
  39 .output { @include cdSetup($color-output); }
  40 .source { @include cdSetup($color-source); }
  41
  42 .bash, .language-bash     { @include cdSetup($color-source); }
  43 .make, .language-make     { @include cdSetup($color-source); }
  44 .matlab, .language-matlab { @include cdSetup($color-source); }
  45 .python, .language-python { @include cdSetup($color-source); }
  46 .r, .language-r           { @include cdSetup($color-source); }
  47 .sql, .langauge-sql       { @include cdSetup($color-source); }
  48
  49 .error pre,
  50 .output pre,
  51 .source pre,
  52 .bash pre,
  53 .language-bash pre,
  54 .make pre,
  55 .language-make pre,
  56 .matlab pre,
  57 .language-matlab pre,
  58 .python pre,
  59 .language-python pre,
  60 .r pre,
  61 .language-r pre,
  62 .sql pre ,
  63 .language-sql pre {
  64   border-radius: 0 4px 4px 0;
  65 }
  66
  67 //----------------------------------------
  68 // Specialized blockquote environments for learning objectives, callouts, etc.
  69 //----------------------------------------
  70
  71 $codeblock-padding: 5px !default;
  72
  73 @mixin bkSetup($color, $glyph) {
  74
  75   $gradientcolor1: $color;
  76   $gradientcolor2: scale-color($color, $lightness: 10%);
  77
  78   padding-left: $codeblock-padding;
  79   padding-top: 0;
  80   padding-bottom: 0;
  81   padding-right: 0;
  82   border: 1px solid;
  83   border-color: $color;
  84   border-radius: 4px;
  85   padding-bottom: $codeblock-padding;
  86
  87   margin: 15px 0;
  88
  89   h2 {
  90     padding-top: $codeblock-padding;
  91     padding-bottom: $codeblock-padding;
  92     font-size: 20px;
  93     background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
  94     border-color: $color;
  95     margin-top: 0px;
  96     margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
  97   }
  98   h2:before {
  99     font-family: 'Glyphicons Halflings';
 100     content: $glyph;
 101     float: left;
 102     padding-left: $codeblock-padding;
 103     padding-right: $codeblock-padding;
 104     display: inline-block;
 105     -webkit-font-smoothing: antialiased;
 106   }
 107
 108 }
 109
 110 .callout{ @include bkSetup($color-callout, "\e146"); }
 111 .challenge{ @include bkSetup($color-challenge, "\270f"); }
 112 .checklist{ @include bkSetup($color-checklist, "\e067"); }
 113 .discussion{ @include bkSetup($color-discussion, "\e123"); }
 114 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
 115 .objectives{ @include bkSetup($color-objectives, "\e085"); }
 116 .prereq{ @include bkSetup($color-prereq, "\e124"); }
 117 .solution{ @include bkSetup($color-solution, "\e105"); }
 118 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
 119
 120 .callout h3,
 121 .challenge h3,
 122 .checklist h3,
 123 .discussion h3,
 124 .keypoints h3,
 125 .objectives h3,
 126 .prereq h3,
 127 .solution h3,
 128 .testimonial h3 {
 129 font-size: 18px;
 130 }
 131
 132 blockquote p {
 133     margin: 5px;
 134 }
 135
 136 //----------------------------------------
 137 // Override Bootstrap settings.
 138 //----------------------------------------
 139
 140 code {
 141   white-space: nowrap;
 142   padding: 2px 5px;
 143   color: #3d90d9;
 144   background-color: #e7e7e7;
 145 }
 146
 147 article img {
 148     display: block;
 149     margin: 20px auto;
 150     max-width: 100%;
 151 }
 152
 153 article h2 {
 154   margin: 48px 0 16px;
 155   border-bottom: solid 1px #eaecef;
 156   padding-bottom: 0.3em;
 157   line-height: 1.25;
 158 }
 159
 160 article h3 { margin: 40px 0 16px; }
 161
 162 //----------------------------------------
 163 // Miscellaneous.
 164 //----------------------------------------
 165
 166 .figures h2 { margin-top: 100px; }
 167
 168 .maintitle {
 169   text-align: center;
 170 }
 171
 172 .footertext {
 173   text-align: center;
 174 }
 175
 176 footer .copyright,
 177 footer .help-links
 178 {
 179     font-size: inherit;
 180     margin-top: 10px;
 181     margin-bottom: 10px;
 182     font-weight: 500;
 183     line-height: 1.1;
 184 }
 185
 186 img.navbar-logo {
 187   height: 40px; // synchronize with height of navbar
 188   padding-top: 5px;
 189   padding-right: 10px;
 190 }
 191
 192 div.branding {
 193   color: $color-brand;
 194 }
 195
 196 ul,
 197 ol {
 198   padding-left: 2em;
 199 }
 200
 201 span.fold-unfold {
 202   margin-left: 1em;
 203   opacity: 0.5;
 204 }
 205
 206
 207 //----------------------------------------
 208 // Life cycle box
 209 //----------------------------------------
 210
 211 div.life-cycle {
 212     position: -webkit-sticky; /* Safari */
 213     position: sticky;
 214     top: 0;
 215     z-index: 100;
 216     font-size: 1.2em;
 217     text-align: center;
 218     margin-bottom: -1px;
 219     border-radius: 0;
 220 }
 221
 222 .pre-alpha {
 223     color: #a94442;
 224     background: #f2dede;
 225 }
 226
 227 .alpha {
 228     color: #8a6d3b;
 229     background: #fcf8e3;
 230 }
 231
 232 .beta {
 233     color: #31708f;
 234     background: #d9edf7;
 235 }
 236
 237
 238 //----------------------------------------
 239 // keyboard key style, from StackExchange.
 240 //----------------------------------------
 241
 242 kbd {
 243     display: inline-block;
 244     margin: 0 .1em;
 245     padding: .1em .6em;
 246     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
 247     font-size: 11px;
 248     line-height: 1.4;
 249     color: #242729;
 250     text-shadow: 0 1px 0 #FFF;
 251     background-color: #e1e3e5;
 252     border: 1px solid #adb3b9;
 253     border-radius: 3px;
 254     box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 255     white-space: nowrap;
 256     font-style: normal;
 257 }