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 // Generic setup. Has to come before .error, .warning, and .output
  42 div[class^='language-'] { @include cdSetup($color-source); }
  43
  44 div.source  { @include cdSetup($color-source); }
  45 div.error   { @include cdSetup($color-error); }
  46 div.warning { @include cdSetup($color-warning); }
  47 div.output  { @include cdSetup($color-output); }
  48
  49 div.error::before,
  50 div.warning:before,
  51 div.output::before,
  52 div.source::before,
  53 div[class^='language-']::before {
  54     background-color: #f2eff6;
  55     display: block;
  56     font-weight: bold;
  57     padding: 5px 10px;
  58 }
  59
  60 div[class^='language-']::before,
  61 div.source::before { content: "Code"; }
  62
  63 div.error::before  { background-color: #ffebe6; content: "Error"; }
  64 div.warning:before { background-color: #f8f4e8; content:" Warning"; }
  65 div.output::before { background-color: #efefef; content: "Output"; }
  66
  67 div.language-bash::before   { content: "Bash"; }
  68 div.language-c::before      { content: "C"; }
  69 div.language-cmake::before  { content: "CMake"; }
  70 div.language-cpp::before    { content: "C++"; }
  71 div.language-make::before   { content: "Make"; }
  72 div.language-matlab::before { content: "MATLAB"; }
  73 div.language-python::before { content: "Python"; }
  74 div.language-r::before      { content: "R"; }
  75 div.language-sql::before    { content: "SQL"; }
  76
  77 // Tab panels are used on Setup pages to show instructions for different Operating Systems
  78 .tab-pane {
  79   border: solid 1px #ddd; // #ddd == @nav-tabs-active-link-hover-border-color
  80   border-top: none;
  81   padding: 20px 20px 10px 20px;
  82   border-radius: 0 0 4px 4px; // 4px == @border-radius-base
  83 }
  84
  85 // Stripe above tab panels where OS tabs are shown
  86 ul.nav.nav-tabs {
  87   background: #E1E1E1;
  88   border-radius: 4px 4px 0 0;  // 4px == @border-radius-base
  89 }
  90
  91 // adjust line height of links so that clickable area (of OS tabs) is 44px high
  92 ul.nav.nav-tabs li a { line-height: 24px; } // or 1.714285716
  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 // .yt-wrapper2 can be used for limiting maximum width of YouTube iframes only
 101 .yt-wrapper2 { max-width: 100%; margin: 0 auto; }
 102
 103 // Use full width on small displays
 104 @media only screen and (max-width: 600px) { .yt-wrapper2 { max-width: 100%; } }
 105
 106 .yt-wrapper {
 107     height: 0;
 108     margin-top: 10px;
 109     padding-bottom: 56.25%;
 110     position: relative;
 111     width: 100%;
 112 }
 113
 114 .yt-frame {
 115     height: 100%;
 116     left: 0;
 117     position: absolute;
 118     top: 0;
 119     width: 100%;
 120 }
 121
 122 //----------------------------------------
 123 // Specialized blockquote environments for learning objectives, callouts, etc.
 124 //----------------------------------------
 125
 126 $codeblock-padding: 5px !default;
 127
 128 @mixin bkSetup($color, $glyph) {
 129
 130   $gradientcolor1: $color;
 131   $gradientcolor2: scale-color($color, $lightness: 10%);
 132
 133   padding: 0 0 $codeblock-padding $codeblock-padding;
 134   border: 1px solid;
 135   border-color: $color;
 136   border-radius: 4px;
 137
 138   margin: 15px 5px 10px 0;
 139
 140   h2 {
 141     padding-top: $codeblock-padding;
 142     padding-bottom: $codeblock-padding;
 143     font-size: 20px;
 144     background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
 145     border-color: $color;
 146     margin-top: 0px;
 147     margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
 148   }
 149   h2:before {
 150     font-family: 'Glyphicons Halflings';
 151     content: $glyph;
 152     float: left;
 153     padding-left: $codeblock-padding;
 154     padding-right: $codeblock-padding;
 155     display: inline-block;
 156     -webkit-font-smoothing: antialiased;
 157   }
 158
 159 }
 160
 161 .callout{ @include bkSetup($color-callout, "\e146"); }
 162 .caution{ @include bkSetup($color-caution, "\e107"); }
 163 .challenge{ @include bkSetup($color-challenge, "\270f"); }
 164 .checklist{ @include bkSetup($color-checklist, "\e067"); }
 165 .discussion{ @include bkSetup($color-discussion, "\e123"); }
 166 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
 167 .objectives{ @include bkSetup($color-objectives, "\e085"); }
 168 .prereq{ @include bkSetup($color-prereq, "\e124"); }
 169 .solution{ @include bkSetup($color-solution, "\e105"); }
 170 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
 171
 172 .callout h3,
 173 .challenge h3,
 174 .checklist h3,
 175 .discussion h3,
 176 .keypoints h3,
 177 .objectives h3,
 178 .prereq h3,
 179 .solution h3,
 180 .testimonial h3 {
 181 font-size: 18px;
 182 }
 183
 184 .challenge    { background-color: #eec27520; }
 185 .callout      { background-color: #f4fd9c20; }
 186 .challenge    { background-color: #eec27520; }
 187 .checklist    { background-color: #dfd2a020; }
 188 .discussion   { background-color: #eec27520; }
 189 .keypoints    { background-color: #7ae78e20; }
 190 .objectives   { background-color: #daee8420; }
 191 .prereq       { background-color: #9cd6dc20; }
 192 .solution     { background-color: #ded4b94d; }
 193 .testimonial  { background-color: #fc8dc120; }
 194
 195 blockquote p {
 196     margin: 5px;
 197 }
 198 blockquote :not(h2) + p {
 199     padding-top: 1em;
 200 }
 201
 202 //----------------------------------------
 203 // Override Bootstrap settings.
 204 //----------------------------------------
 205
 206 blockquote { font-size: inherit; }
 207
 208 a code {
 209   color: #006cad;
 210 }
 211
 212 code {
 213   white-space: nowrap;
 214   padding: 2px 5px;
 215   color: #24292e;
 216   background-color: #e7e7e7;
 217 }
 218
 219 samp { hyphens: none; }
 220
 221 dt { margin-top: 20px; }
 222 dd { margin-left: 2em; }
 223
 224 article img {
 225     display: block;
 226     margin: 20px auto;
 227     max-width: 100%;
 228 }
 229
 230 li img {
 231     display: inline;
 232     margin: 3px auto;
 233     max-width: 100%;
 234 }
 235
 236 article h2 {
 237   margin: 48px 0 16px;
 238   border-bottom: solid 1px #eaecef;
 239   padding-bottom: 0.3em;
 240   line-height: 1.25;
 241 }
 242
 243 article h3 { margin: 40px 0 16px; }
 244
 245 article pre {
 246     margin: 0;
 247     border: 0;
 248 }
 249
 250 //----------------------------------------
 251 // Miscellaneous.
 252 //----------------------------------------
 253
 254 .figures h2 { margin-top: 100px; }
 255
 256 .maintitle {
 257   text-align: center;
 258 }
 259
 260 .footertext {
 261   text-align: center;
 262 }
 263
 264 footer .license,
 265 footer .help-links
 266 {
 267     font-size: inherit;
 268     margin-top: 10px;
 269     margin-bottom: 10px;
 270     font-weight: 500;
 271     line-height: 1.1;
 272 }
 273
 274 img.navbar-logo {
 275   height: 40px; // synchronize with height of navbar
 276   padding-top: 5px;
 277   padding-right: 10px;
 278 }
 279
 280 div.branding {
 281   color: $color-brand;
 282 }
 283
 284 ul,
 285 ol {
 286   padding-left: 2em;
 287 }
 288
 289 span.fold-unfold {
 290   margin-left: 1em;
 291   opacity: 0.5;
 292 }
 293
 294
 295 //----------------------------------------
 296 // Life cycle box
 297 //----------------------------------------
 298
 299 div.life-cycle {
 300     position: -webkit-sticky; /* Safari */
 301     position: sticky;
 302     top: 0;
 303     z-index: 100;
 304     font-size: 1.2em;
 305     text-align: center;
 306     margin-bottom: -1px;
 307     border-radius: 0;
 308 }
 309
 310 .pre-alpha {
 311     color: #a94442;
 312     background: #f2dede;
 313 }
 314
 315 .alpha {
 316     color: #8a6d3b;
 317     background: #fcf8e3;
 318 }
 319
 320 .beta {
 321     color: #31708f;
 322     background: #d9edf7;
 323 }
 324
 325 // Remove border around spans of text within code blocks
 326 // that the highlighter (rouge) failed to recognize.
 327 pre.highlight span.err {
 328     border: none;
 329 }
 330
 331
 332 //----------------------------------------
 333 // keyboard key style, from StackExchange.
 334 //----------------------------------------
 335
 336 kbd {
 337     display: inline-block;
 338     margin: 0 .1em;
 339     padding: .1em .6em;
 340     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
 341     font-size: 11px;
 342     line-height: 1.4;
 343     color: #242729;
 344     text-shadow: 0 1px 0 #FFF;
 345     background-color: #e1e3e5;
 346     border: 1px solid #adb3b9;
 347     border-radius: 3px;
 348     box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 349     white-space: nowrap;
 350     font-style: normal;
 351 }