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