change px to em

I used the conversion for 1px = 0.0625em based on a default 16pt font

This will address part of carpentries/styles#630

Author: zkamvar

assets/css/lesson.scss

@@ -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,27 +140,27 @@ a { color: #204A6F; }
 // Specialized blockquote environments for learning objectives, callouts, etc.
 //----------------------------------------
 
-$codeblock-padding: 5px !default;
+$codeblock-padding: 0.325em !default;
 
 @mixin bkSetup($color, $glyph) {
 
   $gradientcolor1: $color;
   $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;
 }