Skip to content

Commit

Permalink
change px to em
Browse files Browse the repository at this point in the history 
I used the conversion for 1px = 0.0625em based on a default 16pt font

This will address part of carpentries/styles#630
  • Loading branch information
@zkamvar
zkamvar committed Nov 8, 2021
1 parent 37a7268 commit 70caa0a
Showing 1 changed file with 42 additions and 40 deletions.
82 changes: 42 additions & 40 deletions assets/css/lesson.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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)
Expand All @@ -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%;
Expand All @@ -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 {
Expand Down Expand Up @@ -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; }
Expand All @@ -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;
Expand Down Expand Up @@ -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%;
}

Expand All @@ -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;
Expand All @@ -281,7 +281,7 @@ article pre {
// Miscellaneous.
//----------------------------------------

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

.maintitle {
text-align: center;
Expand All @@ -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 {
Expand All @@ -324,7 +324,7 @@ span.fold-unfold {

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;
}

//----------------------------------------
Expand All @@ -338,7 +338,7 @@ div.life-cycle {
z-index: 100;
font-size: 1.2em;
text-align: center;
margin-bottom: -1px;
margin-bottom: -0.065em;
border-radius: 0;
}

Expand Down Expand Up @@ -378,18 +378,20 @@ 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;
}



//------------------------------------------
// Show solution while printing (Ctrl + P)
// -----------------------------------------
Expand Down

0 comments on commit 70caa0a

Please sign in to comment.