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