Commit d5e06647 authored by Carpentries Bot's avatar Carpentries Bot
Browse files

[actions] Sync lesson with carpentries/styles

parents 5833666f bd9f2747

assets/css/lesson.scss

+40 −40
Original line number Diff line number Diff line
@@ -32,10 +32,10 @@ $color-testimonial: #fc8dc1 !default; 


@mixin cdSetup($color) {

    color: $color;

    border: solid 1px $color;

    border-left: solid 5px $color;

    margin: 15px 5px 10px 0;

    border-radius: 4px 0 0 4px;

    border: solid 0.065em $color;

    border-left: solid 0.325em $color;

    margin: 0.975em 0.325em 0.65em 0;

    border-radius: 0.26em 0 0 0.26em;

}



// Generic setup. Has to come before .error, .warning, and .output
@@ -54,7 +54,7 @@ div[class^='language-']::before { 
    background-color: #f2eff6;

    display: block;

    font-weight: bold;

    padding: 5px 10px;

    padding: 0.325em 0.65em;

}



div[class^='language-']::before,
@@ -93,20 +93,20 @@ div.language-vulkan::before { content: "Vulkan"; } 


// 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: solid 0.065em #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

  padding: 1.3em 1.3em 0.65em 1.3em;

  border-radius: 0 0 0.26em 0.26em; // 0.26em == @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

  border-radius: 0.26em 0.26em 0 0;  // 0.26em == @border-radius-base

}



// 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

// adjust line height of links so that clickable area (of OS tabs) is 2.86em high

ul.nav.nav-tabs li a { line-height: 1.56em; } // 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)
@@ -118,11 +118,11 @@ a { color: #204A6F; } 
.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%; } }

@media only screen and (max-width: 39em) { .yt-wrapper2 { max-width: 100%; } }



.yt-wrapper {

    height: 0;

    margin-top: 10px;

    margin-top: 0.65em;

    padding-bottom: 56.25%;

    position: relative;

    width: 100%;
@@ -140,7 +140,7 @@ a { color: #204A6F; } 
// Specialized blockquote environments for learning objectives, callouts, etc.

//----------------------------------------



$codeblock-padding: 5px !default;

$codeblock-padding: 0.325em !default;



@mixin bkSetup($color, $glyph) {
@@ -148,19 +148,19 @@ $codeblock-padding: 5px !default; 
  $gradientcolor2: scale-color($color, $lightness: 10%);



  padding: 0 0 $codeblock-padding $codeblock-padding;

  border: 1px solid;

  border: 0.065em solid;

  border-color: $color;

  border-radius: 4px;

  border-radius: 0.26em;



  margin: 15px 5px 10px 0;

  margin: 0.975em 0.325em 0.65em 0;



  h2 {

    padding-top: $codeblock-padding;

    padding-bottom: $codeblock-padding;

    font-size: 20px;

    font-size: 1.3em;

    background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);

    border-color: $color;

    margin-top: 0px;

    margin-top: 0em;

    margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote

  }

  h2:before {
@@ -195,7 +195,7 @@ $codeblock-padding: 5px !default; 
.prereq h3,

.solution h3,

.testimonial h3 {

font-size: 18px;

font-size: 1.17em;

}



.challenge    { background-color: #eec27520; }
@@ -210,7 +210,7 @@ font-size: 18px; 
.testimonial  { background-color: #fc8dc120; }



blockquote p {

    margin: 5px;

    margin: 0.325em;

}

blockquote :not(h2) + p {

    padding-top: 1em;
@@ -242,19 +242,19 @@ a:visited { 


code {

  white-space: nowrap;

  padding: 2px 5px;

  padding: 0.13em 0.325em;

  color: #24292e;

  background-color: #e7e7e7;

}



samp { hyphens: none; }



dt { margin-top: 20px; }

dt { margin-top: 1.3em; }

dd { margin-left: 2em; }



article img {

    display: block;

    margin: 20px auto;

    margin: 1.3em auto;

    max-width: 100%;

}
@@ -264,13 +264,13 @@ article img.inline { 
}



article h2 {

  margin: 48px 0 16px;

  border-bottom: solid 1px #eaecef;

  margin: 3.12em 0 1.04em;

  border-bottom: solid 0.065em #eaecef;

  padding-bottom: 0.3em;

  line-height: 1.25;

}



article h3 { margin: 40px 0 16px; }

article h3 { margin: 2.6em 0 1.04em; }



article pre {

    margin: 0;
@@ -281,7 +281,7 @@ article pre { 
// Miscellaneous.

//----------------------------------------



.figures h2 { margin-top: 100px; }

.figures h2 { margin-top: 6.5em; }



.maintitle {

  text-align: center;
@@ -295,16 +295,16 @@ footer .license, 
footer .help-links

{

    font-size: inherit;

    margin-top: 10px;

    margin-bottom: 10px;

    margin-top: 0.65em;

    margin-bottom: 0.65em;

    font-weight: 500;

    line-height: 1.1;

}



img.navbar-logo {

  height: 40px; // synchronize with height of navbar

  padding-top: 5px;

  padding-right: 10px;

  height: 2.6em; // synchronize with height of navbar

  padding-top: 0.325em;

  padding-right: 0.65em;

}



div.branding {
@@ -333,7 +333,7 @@ img { 


p.image-with-shadow img,

img.image-with-shadow {

  box-shadow: 0 6px 24px 0 #888;

  box-shadow: 0 0.39em 1.56em 0 #888;

}



//----------------------------------------
@@ -347,7 +347,7 @@ div.life-cycle { 
    z-index: 100;

    font-size: 1.2em;

    text-align: center;

    margin-bottom: -1px;

    margin-bottom: -0.065em;

    border-radius: 0;

}
@@ -387,14 +387,14 @@ kbd { 
    margin: 0 .1em;

    padding: .1em .6em;

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;

    font-size: 11px;

    font-size: 0.715em;

    line-height: 1.4;

    color: #242729;

    text-shadow: 0 1px 0 #FFF;

    text-shadow: 0 0.065em 0 #FFF;

    background-color: #e1e3e5;

    border: 1px solid #adb3b9;

    border-radius: 3px;

    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;

    border: 0.065em solid #adb3b9;

    border-radius: 0.195em;

    box-shadow: 0 0.065em 0 rgba(12,13,14,0.2), 0 0 0 0.13em #FFF inset;

    white-space: nowrap;

    font-style: normal;

}