Adding Caution Callout

NEWS.md

@@ -9,6 +9,9 @@
 * Carpentry-specific favicons are now used automatically based on the value of
   the `carpentry:` value in the `config.yaml` file (@Bisaloo, #152, based on a
   report from @zkamvar in #33).
+* Addition of the `caution` callout (@MttArmstrong #149)
+* Improve CSS rendering of checklists by removing the bullet point and increasing
+  spacing between checkbox and label (reported @jq-11 #156, fixed @froggleston)
 
 
 # varnish 1.0.4 (2024-08-23)

source/stylesheets/callouts.scss

@@ -117,6 +117,17 @@
   color: $black;
 }
 
+/* Caution */
+
+.caution {
+  border-left: 10px solid $red;
+}
+
+.caution .callout-square {
+  background: $red;
+  color: #ffffff;
+}
+
 /* Parent Class for Accordions in Learner View */
 
 .learner-accordion {

source/stylesheets/dark.scss

@@ -266,6 +266,20 @@ $color-mode-type: data;
     color: #fff;
   }
 
+  /* Caution */
+
+  .caution {
+    border-left: 10px solid shade-color($red, 50%);
+    h4 {
+      color: #fff;
+    }
+  }
+
+  .caution .callout-square {
+    background: shade-color($red, 50%);
+    color: #fff;
+  }
+
   /* Parent Class for Accordions in Learner View */
 
   .learner-accordion {