Skip to content

Commit

Permalink
Edits lesson CSS file.
Browse files Browse the repository at this point in the history 
  - Updates assets/css/lesson.scss to match the one from carpentries/workshop-template.
  - This makes the nav-table in the setup.md page prettier.
  • Loading branch information
@vinisalazar @alee
vinisalazar authored and alee committed Jun 4, 2021
1 parent f49eb90 commit f7091da
Showing 1 changed file with 119 additions and 37 deletions.
156 changes: 119 additions & 37 deletions assets/css/lesson.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ $color-brand: #2b3990 !default;

// code boxes
$color-error: #bd2c00 !default;
$color-warning: #cda01d !default;
$color-output: #303030 !default;
$color-source: #6e5494 !default;
$color-source: #360084 !default;

// blockquotes
$color-callout: #f4fd9c !default;
$color-caution: #cf000e !default;
$color-challenge: #eec275 !default;
$color-checklist: #dfd2a0 !default;
$color-discussion: #eec275 !default;
Expand All @@ -30,48 +32,93 @@ $color-testimonial: #fc8dc1 !default;

@mixin cdSetup($color) {
color: $color;
border: solid 0.5px $color;
border: solid 1px $color;
border-left: solid 5px $color;
margin: 15px 5px 10px 0;
border-radius: 4px 0 0 4px;
}

.error { @include cdSetup($color-error); }
.output { @include cdSetup($color-output); }
.source { @include cdSetup($color-source); }

.bash, .language-bash { @include cdSetup($color-source); }
.make, .language-make { @include cdSetup($color-source); }
.matlab, .language-matlab { @include cdSetup($color-source); }
.python, .language-python { @include cdSetup($color-source); }
.r, .language-r { @include cdSetup($color-source); }
.sql, .language-sql { @include cdSetup($color-source); }

.error::before,
.output::before,
.source::before,
.bash::before, .language-bash::before,
.make::before, .language-make::before,
.matlab::before, .language-matlab::before,
.python::before, .language-python::before,
.r::before, .language-r::before,
.sql::before, .language-sql::before {
background-color: #f2eff6;
display: block;
font-weight: bold;
padding: 5px 10px;
// Generic setup. Has to come before .error, .warning, and .output
div[class^='language-'] { @include cdSetup($color-source); }

div.source { @include cdSetup($color-source); }
div.error { @include cdSetup($color-error); }
div.warning { @include cdSetup($color-warning); }
div.output { @include cdSetup($color-output); }

div.error::before,
div.warning:before,
div.output::before,
div.source::before,
div[class^='language-']::before {
background-color: #f2eff6;
display: block;
font-weight: bold;
padding: 5px 10px;
}

div[class^='language-']::before,
div.source::before { content: "Code"; }

div.error::before { background-color: #ffebe6; content: "Error"; }
div.warning:before { background-color: #f8f4e8; content:" Warning"; }
div.output::before { background-color: #efefef; content: "Output"; }

div.language-bash::before { content: "Bash"; }
div.language-c::before { content: "C"; }
div.language-cmake::before { content: "CMake"; }
div.language-cpp::before { content: "C++"; }
div.language-html::before { content: "HTML"; }
div.language-make::before { content: "Make"; }
div.language-matlab::before { content: "MATLAB"; }
div.language-python::before { content: "Python"; }
div.language-r::before { content: "R"; }
div.language-sql::before { content: "SQL"; }

// Tab panels are used on Setup pages to show instructions for different Operating Systems
.tab-pane {
border: solid 1px #ddd; // #ddd == @nav-tabs-active-link-hover-border-color
border-top: none;
padding: 20px 20px 10px 20px;
border-radius: 0 0 4px 4px; // 4px == @border-radius-base
}

// Stripe above tab panels where OS tabs are shown
ul.nav.nav-tabs {
background: #E1E1E1;
border-radius: 4px 4px 0 0; // 4px == @border-radius-base
}

.error::before { background-color: #ffebe6; content: "Error"; }
.output::before { background-color: #efefef; content: "Output"; }
.source::before { content: "Code"; }
.bash::before, .language-bash::before { content: "Bash"; }
.make::before, .language-make::before { content: "Make"; }
.matlab::before, .language-matlab::before { content: "Matlab"; }
.python::before, .language-python::before { content: "Python"; }
.r::before, .language-r::before { content: "R"; }
.sql::before, .language-sql::before { content: "SQL"; }
// adjust line height of links so that clickable area (of OS tabs) is 44px high
ul.nav.nav-tabs li a { line-height: 24px; } // or 1.714285716

// This color provides better contrast ratio on most backgrounds used on Carpentries websites
// 9.24 on FFFFFF: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=FFFFFF&api (body)
// 8.78 on F9F9F9: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=F9F9F9&api (tables)
// 7.07 on E1E1E1: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=E1E1E1&api (tab panels)
a { color: #204A6F; }

// .yt-wrapper2 can be used for limiting maximum width of YouTube iframes only
.yt-wrapper2 { max-width: 100%; margin: 0 auto; }

// Use full width on small displays
@media only screen and (max-width: 600px) { .yt-wrapper2 { max-width: 100%; } }

.yt-wrapper {
height: 0;
margin-top: 10px;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}

.yt-frame {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

//----------------------------------------
// Specialized blockquote environments for learning objectives, callouts, etc.
Expand Down Expand Up @@ -113,6 +160,7 @@ $codeblock-padding: 5px !default;
}

.callout{ @include bkSetup($color-callout, "\e146"); }
.caution{ @include bkSetup($color-caution, "\e107"); }
.challenge{ @include bkSetup($color-challenge, "\270f"); }
.checklist{ @include bkSetup($color-checklist, "\e067"); }
.discussion{ @include bkSetup($color-discussion, "\e123"); }
Expand Down Expand Up @@ -148,18 +196,46 @@ font-size: 18px;
blockquote p {
margin: 5px;
}
blockquote :not(h2) + p {
padding-top: 1em;
}

//----------------------------------------
// Override Bootstrap settings.
//----------------------------------------

blockquote { font-size: inherit; }

a code {
color: #006cad;
}

a:link {
color: #196EBD;
}

a:active,
a:hover {
outline: 0;
text-decoration: underline;
}

a:visited {
color: #1AA4DA;
}

code {
white-space: nowrap;
padding: 2px 5px;
color: #006cad;
color: #24292e;
background-color: #e7e7e7;
}

samp { hyphens: none; }

dt { margin-top: 20px; }
dd { margin-left: 2em; }

article img {
display: block;
margin: 20px auto;
Expand Down Expand Up @@ -194,7 +270,7 @@ article pre {
text-align: center;
}

footer .copyright,
footer .license,
footer .help-links
{
font-size: inherit;
Expand Down Expand Up @@ -255,6 +331,12 @@ div.life-cycle {
background: #d9edf7;
}

// Remove border around spans of text within code blocks
// that the highlighter (rouge) failed to recognize.
pre.highlight span.err {
border: none;
}


//----------------------------------------
// keyboard key style, from StackExchange.
Expand Down

0 comments on commit f7091da

Please sign in to comment.