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