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