Merge pull request #116 from carpentries/fix-font-sizes

[bug fix] use rem units for callouts

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: varnish
 Title: Front-end for The Carpentries Lesson Template
-Version: 1.0.0
+Version: 1.0.1
 Authors@R: c(
     person(given = "Zhian N.",
            family = "Kamvar",

NEWS.md

@@ -1,3 +1,12 @@
+# varnish 1.0.1 (2023-12-14)
+
+## BUG FIX
+
+* Font sizes for headings of overview box, callouts, and accordions now use
+  relative units instead of pixels. This will cause a slight change in the
+  appearance of these headings, but they will be more consistent as the size of
+  the window changes.
+
 # varnish 1.0.0 (2023-12-13)
 
 ## MAJOR VERSION NOTE

source/stylesheets/callouts.scss

@@ -25,8 +25,8 @@
 
 .callout-title {
   position: relative;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin: 0px 0px 25px 0px;
@@ -41,8 +41,8 @@
 
 .callout li {
   margin-left: 0px;
-  margin-top:10px;
-  margin-bottom:20px;
+  margin-top: 10px;
+  margin-bottom: 20px;
 }
 
 .callout-inner {
@@ -141,7 +141,7 @@
     font-family: Mulish;
     font-style: normal;
     font-weight: normal;
-    font-size: 16px;
+    font-size: 1.2rem;
     &:first-of-type .accordion-button {
       border-radius: 0;
     }
@@ -154,7 +154,7 @@
     font-family: Mulish;
     font-style: normal;
     font-weight: normal;
-    font-size: 16px;
+    font-size: 1.2rem;
   }
   .accordion-body {
     padding-left: 35px;
@@ -198,7 +198,7 @@
     }
     &, h3 {
       font-family: Mulish;
-      font-size: 16px;
+      font-size: 1.2rem;
       font-style: normal;
       font-weight: normal;
       text-transform: uppercase;

source/stylesheets/overview.scss

@@ -6,7 +6,7 @@
   border: none;
   height: 53px;
   padding-top: 7px;
-  font-size: calc(18px + 0.3vw);
+  font-size: min(1.5rem, calc(1.25rem + 0.2vw));
   letter-spacing: 0.1em;
   font-weight: 400;
 }
@@ -39,7 +39,7 @@
   text-decoration-thickness: 1px;
   text-underline-offset: 25px;
   margin-bottom: 50px;
-  font-size: min(25px, calc(22px + 0.2vw));
+  font-size: min(1.5rem, calc(1.25rem + 0.25vw));
   font-weight: 600;
   line-height: 1.5rem;
 }