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 //----------------------------------------
 114 // Specialized blockquote environments for learning objectives, callouts, etc.
 115 //----------------------------------------
 116
 117 $codeblock-padding: 5px !default;
 118
 119 @mixin bkSetup($color, $glyph) {
 120
 121   $gradientcolor1: $color;
 122   $gradientcolor2: scale-color($color, $lightness: 10%);
 123
 124   padding: 0 0 $codeblock-padding $codeblock-padding;
 125   border: 1px solid;
 126   border-color: $color;
 127   border-radius: 4px;
 128
 129   margin: 15px 5px 10px 0;
 130
 131   h2 {
 132     padding-top: $codeblock-padding;
 133     padding-bottom: $codeblock-padding;
 134     font-size: 20px;
 135     background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
 136     border-color: $color;
 137     margin-top: 0px;
 138     margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
 139   }
 140   h2:before {
 141     font-family: 'Glyphicons Halflings';
 142     content: $glyph;
 143     float: left;
 144     padding-left: $codeblock-padding;
 145     padding-right: $codeblock-padding;
 146     display: inline-block;
 147     -webkit-font-smoothing: antialiased;
 148   }
 149
 150 }
 151
 152 .callout{ @include bkSetup($color-callout, "\e146"); }
 153 .caution{ @include bkSetup($color-caution, "\e107"); }
 154 .challenge{ @include bkSetup($color-challenge, "\270f"); }
 155 .checklist{ @include bkSetup($color-checklist, "\e067"); }
 156 .discussion{ @include bkSetup($color-discussion, "\e123"); }
 157 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
 158 .objectives{ @include bkSetup($color-objectives, "\e085"); }
 159 .prereq{ @include bkSetup($color-prereq, "\e124"); }
 160 .solution{ @include bkSetup($color-solution, "\e105"); }
 161 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
 162
 163 .callout h3,
 164 .challenge h3,
 165 .checklist h3,
 166 .discussion h3,
 167 .keypoints h3,
 168 .objectives h3,
 169 .prereq h3,
 170 .solution h3,
 171 .testimonial h3 {
 172 font-size: 18px;
 173 }
 174
 175 .challenge    { background-color: #eec27520; }
 176 .callout      { background-color: #f4fd9c20; }
 177 .challenge    { background-color: #eec27520; }
 178 .checklist    { background-color: #dfd2a020; }
 179 .discussion   { background-color: #eec27520; }
 180 .keypoints    { background-color: #7ae78e20; }
 181 .objectives   { background-color: #daee8420; }
 182 .prereq       { background-color: #9cd6dc20; }
 183 .solution     { background-color: #ded4b94d; }
 184 .testimonial  { background-color: #fc8dc120; }
 185
 186 blockquote p {
 187     margin: 5px;
 188 }
 189 blockquote :not(h2) + p {
 190     padding-top: 1em;
 191 }
 192
 193 //----------------------------------------
 194 // Override Bootstrap settings.
 195 //----------------------------------------
 196
 197 blockquote { font-size: inherit; }
 198
 199 a code {
 200   color: #006cad;
 201 }
 202
 203 code {
 204   white-space: nowrap;
 205   padding: 2px 5px;
 206   color: #24292e;
 207   background-color: #e7e7e7;
 208 }
 209
 210 samp { hyphens: none; }
 211
 212 dt { margin-top: 20px; }
 213 dd { margin-left: 2em; }
 214
 215 article img {
 216     display: block;
 217     margin: 20px auto;
 218     max-width: 100%;
 219 }
 220
 221 article h2 {
 222   margin: 48px 0 16px;
 223   border-bottom: solid 1px #eaecef;
 224   padding-bottom: 0.3em;
 225   line-height: 1.25;
 226 }
 227
 228 article h3 { margin: 40px 0 16px; }
 229
 230 article pre {
 231     margin: 0;
 232     border: 0;
 233 }
 234
 235 //----------------------------------------
 236 // Miscellaneous.
 237 //----------------------------------------
 238
 239 .figures h2 { margin-top: 100px; }
 240
 241 .maintitle {
 242   text-align: center;
 243 }
 244
 245 .footertext {
 246   text-align: center;
 247 }
 248
 249 footer .license,
 250 footer .help-links
 251 {
 252     font-size: inherit;
 253     margin-top: 10px;
 254     margin-bottom: 10px;
 255     font-weight: 500;
 256     line-height: 1.1;
 257 }
 258
 259 img.navbar-logo {
 260   height: 40px; // synchronize with height of navbar
 261   padding-top: 5px;
 262   padding-right: 10px;
 263 }
 264
 265 div.branding {
 266   color: $color-brand;
 267 }
 268
 269 ul,
 270 ol {
 271   padding-left: 2em;
 272 }
 273
 274 span.fold-unfold {
 275   margin-left: 1em;
 276   opacity: 0.5;
 277 }
 278
 279
 280 //----------------------------------------
 281 // Life cycle box
 282 //----------------------------------------
 283
 284 div.life-cycle {
 285     position: -webkit-sticky; /* Safari */
 286     position: sticky;
 287     top: 0;
 288     z-index: 100;
 289     font-size: 1.2em;
 290     text-align: center;
 291     margin-bottom: -1px;
 292     border-radius: 0;
 293 }
 294
 295 .pre-alpha {
 296     color: #a94442;
 297     background: #f2dede;
 298 }
 299
 300 .alpha {
 301     color: #8a6d3b;
 302     background: #fcf8e3;
 303 }
 304
 305 .beta {
 306     color: #31708f;
 307     background: #d9edf7;
 308 }
 309
 310
 311 //----------------------------------------
 312 // keyboard key style, from StackExchange.
 313 //----------------------------------------
 314
 315 kbd {
 316     display: inline-block;
 317     margin: 0 .1em;
 318     padding: .1em .6em;
 319     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
 320     font-size: 11px;
 321     line-height: 1.4;
 322     color: #242729;
 323     text-shadow: 0 1px 0 #FFF;
 324     background-color: #e1e3e5;
 325     border: 1px solid #adb3b9;
 326     border-radius: 3px;
 327     box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 328     white-space: nowrap;
 329     font-style: normal;
 330 }