From bc2f5e0423b6c794d908984962722187dad72056 Mon Sep 17 00:00:00 2001 From: "Zhian N. Kamvar" Date: Mon, 8 Nov 2021 09:24:31 -0800 Subject: [PATCH] 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 --- assets/css/lesson.scss | 80 +++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss index db6b6cf5..39d1f50d 100644 --- a/assets/css/lesson.scss +++ b/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,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 { @@ -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; } //---------------------------------------- @@ -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; } @@ -378,14 +378,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; }