Adjust heading font sizes to use rem units;

One of the infinite hells that we were thrown into with this CSS we were
given was the fact that the implementors really just copy/pasted the
CSS directly from the figma designs, which emit font sizes in pixels
instead of relative units.

I attempted to fix this for the headings in 311a1e1, but I did not
address the callout or overview headings, which were fixed to px.

The latest update added a min() switch to the overview h3 font size, but
it was set at 25px, which was fine for the objectives, but problematic
for preguntas (es translation). Instead of bumping this down to 24px, I
changed it to min(1.5rem, calc(1.25rem + 0.2vw)); which matches better
with the size of the h3 headers of calc(1.25rem + 0.5vw); and provides
the fallback of 1.5rem for large screen sizes.

Author: zkamvar

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

inst/pkgdown/assets/assets/styles.css

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

inst/pkgdown/assets/assets/styles.css.map

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