Warning, /tutorial-setting-up-environment/assets/css/lesson.scss is written in an unsupported language. File is not indexed.
0001 ---
0002 ---
0003
0004 //----------------------------------------
0005 // Colors.
0006 //----------------------------------------
0007
0008 // branding
0009 $color-brand: #2b3990 !default;
0010
0011 // code boxes
0012 $color-error: #bd2c00 !default;
0013 $color-warning: #cda01d !default;
0014 $color-output: #303030 !default;
0015 $color-source: #360084 !default;
0016
0017 // blockquotes
0018 $color-callout: #f4fd9c !default;
0019 $color-caution: #cf000e !default;
0020 $color-challenge: #eec275 !default;
0021 $color-checklist: #dfd2a0 !default;
0022 $color-discussion: #eec275 !default;
0023 $color-keypoints: #7ae78e !default;
0024 $color-objectives: #daee84 !default;
0025 $color-prereq: #9cd6dc !default;
0026 $color-solution: #ded4b9 !default;
0027 $color-testimonial: #fc8dc1 !default;
0028
0029 //----------------------------------------
0030 // Specialized code blocks.
0031 //----------------------------------------
0032
0033 @mixin cdSetup($color) {
0034 color: $color;
0035 border: solid 0.065em $color;
0036 border-left: solid 0.325em $color;
0037 margin: 0.975em 0.325em 0.65em 0;
0038 border-radius: 0.26em 0 0 0.26em;
0039 }
0040
0041 // Generic setup. Has to come before .error, .warning, and .output
0042 div[class^='language-'] { @include cdSetup($color-source); }
0043
0044 div.source { @include cdSetup($color-source); }
0045 div.error { @include cdSetup($color-error); }
0046 div.warning { @include cdSetup($color-warning); }
0047 div.output { @include cdSetup($color-output); }
0048
0049 div.error::before,
0050 div.warning:before,
0051 div.output::before,
0052 div.source::before,
0053 div[class^='language-']::before {
0054 background-color: #f2eff6;
0055 display: block;
0056 font-weight: bold;
0057 padding: 0.325em 0.65em;
0058 }
0059
0060 div[class^='language-']::before,
0061 div.source::before { content: "Code"; }
0062
0063 div.error::before { background-color: #ffebe6; content: "Error"; }
0064 div.warning:before { background-color: #f8f4e8; content:" Warning"; }
0065 div.output::before { background-color: #efefef; content: "Output"; }
0066
0067 div.language-basic::before { content: "Basic"; }
0068 div.language-bash::before { content: "Bash"; }
0069 div.language-c::before { content: "C"; }
0070 div.language-chapel::before { content: "Chapel"; }
0071 div.language-cmake::before { content: "CMake"; }
0072 div.language-cpp::before { content: "C++"; }
0073 div.language-cuda::before { content: "Cuda"; }
0074 div.language-d::before { content: "D"; }
0075 div.language-fortran::before { content: "Fortran"; }
0076 div.language-go::before { content: "Go"; }
0077 div.language-html::before { content: "HTML"; }
0078 div.language-java::before { content: "Java"; }
0079 div.language-julia::before { content: "Julia"; }
0080 div.language-kotlin::before { content: "Kotlin"; }
0081 div.language-lua::before { content: "Lua"; }
0082 div.language-make::before { content: "Make"; }
0083 div.language-matlab::before { content: "MATLAB"; }
0084 div.language-opencl::before { content: "OpenCL"; }
0085 div.language-perl::before { content: "Perl"; }
0086 div.language-python::before { content: "Python"; }
0087 div.language-r::before { content: "R"; }
0088 div.language-ruby::before { content: "Ruby"; }
0089 div.language-rust::before { content: "Rust"; }
0090 div.language-scala::before { content: "Scala"; }
0091 div.language-sql::before { content: "SQL"; }
0092 div.language-vulkan::before { content: "Vulkan"; }
0093
0094 // Tab panels are used on Setup pages to show instructions for different Operating Systems
0095 .tab-pane {
0096 border: solid 0.065em #ddd; // #ddd == @nav-tabs-active-link-hover-border-color
0097 border-top: none;
0098 padding: 1.3em 1.3em 0.65em 1.3em;
0099 border-radius: 0 0 0.26em 0.26em; // 0.26em == @border-radius-base
0100 }
0101
0102 // Stripe above tab panels where OS tabs are shown
0103 ul.nav.nav-tabs {
0104 background: #E1E1E1;
0105 border-radius: 0.26em 0.26em 0 0; // 0.26em == @border-radius-base
0106 }
0107
0108 // adjust line height of links so that clickable area (of OS tabs) is 2.86em high
0109 ul.nav.nav-tabs li a { line-height: 1.56em; } // or 1.714285716
0110
0111 // This color provides better contrast ratio on most backgrounds used on Carpentries websites
0112 // 9.24 on FFFFFF: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=FFFFFF&api (body)
0113 // 8.78 on F9F9F9: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=F9F9F9&api (tables)
0114 // 7.07 on E1E1E1: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=E1E1E1&api (tab panels)
0115 a { color: #204A6F; }
0116
0117 // .yt-wrapper2 can be used for limiting maximum width of YouTube iframes only
0118 .yt-wrapper2 { max-width: 100%; margin: 0 auto; }
0119
0120 // Use full width on small displays
0121 @media only screen and (max-width: 39em) { .yt-wrapper2 { max-width: 100%; } }
0122
0123 .yt-wrapper {
0124 height: 0;
0125 margin-top: 0.65em;
0126 padding-bottom: 56.25%;
0127 position: relative;
0128 width: 100%;
0129 }
0130
0131 .yt-frame {
0132 height: 100%;
0133 left: 0;
0134 position: absolute;
0135 top: 0;
0136 width: 100%;
0137 }
0138
0139 //----------------------------------------
0140 // Specialized blockquote environments for learning objectives, callouts, etc.
0141 //----------------------------------------
0142
0143 $codeblock-padding: 0.325em !default;
0144
0145 @mixin bkSetup($color, $glyph) {
0146
0147 $gradientcolor1: $color;
0148 $gradientcolor2: scale-color($color, $lightness: 10%);
0149
0150 padding: 0 0 $codeblock-padding $codeblock-padding;
0151 border: 0.065em solid;
0152 border-color: $color;
0153 border-radius: 0.26em;
0154
0155 margin: 0.975em 0.325em 0.65em 0;
0156
0157 h2 {
0158 padding-top: $codeblock-padding;
0159 padding-bottom: $codeblock-padding;
0160 font-size: 1.3em;
0161 background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
0162 border-color: $color;
0163 margin-top: 0em;
0164 margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
0165 }
0166 h2:before {
0167 font-family: 'Glyphicons Halflings';
0168 content: $glyph;
0169 float: left;
0170 padding-left: $codeblock-padding;
0171 padding-right: $codeblock-padding;
0172 display: inline-block;
0173 -webkit-font-smoothing: antialiased;
0174 }
0175
0176 }
0177
0178 .callout{ @include bkSetup($color-callout, "\e146"); }
0179 .caution{ @include bkSetup($color-caution, "\e107"); }
0180 .challenge{ @include bkSetup($color-challenge, "\270f"); }
0181 .checklist{ @include bkSetup($color-checklist, "\e067"); }
0182 .discussion{ @include bkSetup($color-discussion, "\e123"); }
0183 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
0184 .objectives{ @include bkSetup($color-objectives, "\e085"); }
0185 .prereq{ @include bkSetup($color-prereq, "\e124"); }
0186 .solution{ @include bkSetup($color-solution, "\e105"); }
0187 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
0188
0189 .callout h3,
0190 .challenge h3,
0191 .checklist h3,
0192 .discussion h3,
0193 .keypoints h3,
0194 .objectives h3,
0195 .prereq h3,
0196 .solution h3,
0197 .testimonial h3 {
0198 font-size: 1.17em;
0199 }
0200
0201 .challenge { background-color: #eec27520; }
0202 .callout { background-color: #f4fd9c20; }
0203 .challenge { background-color: #eec27520; }
0204 .checklist { background-color: #dfd2a020; }
0205 .discussion { background-color: #eec27520; }
0206 .keypoints { background-color: #7ae78e20; }
0207 .objectives { background-color: #daee8420; }
0208 .prereq { background-color: #9cd6dc20; }
0209 .solution { background-color: #ded4b94d; }
0210 .testimonial { background-color: #fc8dc120; }
0211
0212 blockquote p {
0213 margin: 0.325em;
0214 }
0215 blockquote :not(h2) + p {
0216 padding-top: 1em;
0217 }
0218
0219 //----------------------------------------
0220 // Override Bootstrap settings.
0221 //----------------------------------------
0222
0223 blockquote { font-size: inherit; }
0224
0225 a code {
0226 color: #006cad;
0227 }
0228
0229 a:link {
0230 color: #196EBD;
0231 }
0232
0233 a:active,
0234 a:hover {
0235 outline: 0;
0236 text-decoration: underline;
0237 }
0238
0239 a:visited {
0240 color: #1AA4DA;
0241 }
0242
0243 code {
0244 white-space: nowrap;
0245 padding: 0.13em 0.325em;
0246 color: #24292e;
0247 background-color: #e7e7e7;
0248 }
0249
0250 samp { hyphens: none; }
0251
0252 dt { margin-top: 1.3em; }
0253 dd { margin-left: 2em; }
0254
0255 article img {
0256 display: block;
0257 margin: 1.3em auto;
0258 max-width: 100%;
0259 }
0260
0261 article img.inline {
0262 display: inline-block;
0263 margin: auto;
0264 }
0265
0266 article h2 {
0267 margin: 3.12em 0 1.04em;
0268 border-bottom: solid 0.065em #eaecef;
0269 padding-bottom: 0.3em;
0270 line-height: 1.25;
0271 }
0272
0273 article h3 { margin: 2.6em 0 1.04em; }
0274
0275 article pre {
0276 margin: 0;
0277 border: 0;
0278 }
0279
0280 //----------------------------------------
0281 // Miscellaneous.
0282 //----------------------------------------
0283
0284 .figures h2 { margin-top: 6.5em; }
0285
0286 .maintitle {
0287 text-align: center;
0288 }
0289
0290 .footertext {
0291 text-align: center;
0292 }
0293
0294 footer .license,
0295 footer .help-links
0296 {
0297 font-size: inherit;
0298 margin-top: 0.65em;
0299 margin-bottom: 0.65em;
0300 font-weight: 500;
0301 line-height: 1.1;
0302 }
0303
0304 img.navbar-logo {
0305 height: 2.6em; // synchronize with height of navbar
0306 padding-top: 0.325em;
0307 padding-right: 0.65em;
0308 }
0309
0310 div.branding {
0311 color: $color-brand;
0312 }
0313
0314 ul,
0315 ol {
0316 padding-left: 2em;
0317 }
0318
0319 span.fold-unfold {
0320 margin-left: 1em;
0321 opacity: 0.5;
0322 }
0323
0324 /*
0325 Force a pixelated rendering of images when original resolution is bigger than
0326 the <img> viewport to avoid a blurring effect that makes it difficult to read the image.
0327 This issue affects primarily Chrome based browsers (as of 2021).
0328 See https://github.com/carpentries/styles/pull/636 for the original report and related links
0329 */
0330 img {
0331 image-rendering: pixelated;
0332 }
0333
0334 p.image-with-shadow img,
0335 img.image-with-shadow {
0336 box-shadow: 0 0.39em 1.56em 0 #888;
0337 }
0338
0339 //----------------------------------------
0340 // Life cycle box
0341 //----------------------------------------
0342
0343 div.life-cycle {
0344 position: -webkit-sticky; /* Safari */
0345 position: sticky;
0346 top: 0;
0347 z-index: 100;
0348 font-size: 1.2em;
0349 text-align: center;
0350 margin-bottom: -0.065em;
0351 border-radius: 0;
0352 }
0353
0354 .pre-alpha {
0355 color: #a94442;
0356 background: #f2dede;
0357 }
0358
0359 .alpha {
0360 color: #8a6d3b;
0361 background: #fcf8e3;
0362 }
0363
0364 .beta {
0365 color: #31708f;
0366 background: #d9edf7;
0367 }
0368
0369 .published {
0370 color: #354711;
0371 background: #effbd7;
0372 }
0373
0374 // Remove border around spans of text within code blocks
0375 // that the highlighter (rouge) failed to recognize.
0376 pre.highlight span.err {
0377 border: none;
0378 }
0379
0380
0381 //----------------------------------------
0382 // keyboard key style, from StackExchange.
0383 //----------------------------------------
0384
0385 kbd {
0386 display: inline-block;
0387 margin: 0 .1em;
0388 padding: .1em .6em;
0389 font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
0390 font-size: 0.715em;
0391 line-height: 1.4;
0392 color: #242729;
0393 text-shadow: 0 0.065em 0 #FFF;
0394 background-color: #e1e3e5;
0395 border: 0.065em solid #adb3b9;
0396 border-radius: 0.195em;
0397 box-shadow: 0 0.065em 0 rgba(12,13,14,0.2), 0 0 0 0.13em #FFF inset;
0398 white-space: nowrap;
0399 font-style: normal;
0400 }
0401
0402 //------------------------------------------
0403 // Show solution while printing (Ctrl + P)
0404 // -----------------------------------------
0405
0406 @media print {
0407 blockquote.solution > * {
0408 display: unset !important;
0409 }
0410 }
