Fix "warning" callout

Author: whatyouhide

content/posts/2025-04-28-async-tests-in-elixir/index.md

@@ -16,7 +16,7 @@ This post is about beautiful, elegant, robust asynchronous tests in Elixir. It's
 
 ![Cover image of a bench with very geometric lines.](cover-image.jpg)
 
-{{ unsplash_credit(name="鱼 鱼", link="https://unsplash.com/photos/a-wooden-room-with-a-bench-in-the-middle-of-it-klE0kbCfrwk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash") }}
+{{ unsplash_credit(name="鱼 鱼", link="<https://unsplash.com/photos/a-wooden-room-with-a-bench-in-the-middle-of-it-klE0kbCfrwk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash>") }}
 
 
 ## When Is It Hard to Parallelize Tests?
@@ -43,8 +43,9 @@ test "writes output to a file" do
 end
 ```
 
-> [!warning] Don't do this at home
-> Use ExUnit's `tmp_dir` tag. It cleans up for you and it's nicer and it protects kittens (probably).
+{% callout(type="warning", title="Don't Do This at Home") %}
+Use ExUnit's `tmp_dir` tag. It cleans up for you and it's nicer and it protects kittens (probably).
+{% end %}
 
 Cool, you can run many of these tests in parallel and they won't step on each other's toes, even though the system under test is all about the side effect.
 

sass/_variables.scss

@@ -14,6 +14,7 @@ $handwrittenFontStack: "Andrea", sans-serif;
   $siteBackground: #f4f5f0;
   $text: #212424;
   $callout-background-info: rgba(#81d2d4, 0.3);
+  $callout-background-warning: rgba(#f4d482, 0.3);
 
   --color-site-background: #{$siteBackground};
   --color-site-background-accented: #{darken($siteBackground, 5)};
@@ -27,6 +28,9 @@ $handwrittenFontStack: "Andrea", sans-serif;
 
   --color-callout-info-background: #{$callout-background-info};
   --color-callout-info-background-title: #{darken($callout-background-info, 20)};
+
+  --color-callout-warning-background: #{$callout-background-warning};
+  --color-callout-warning-background-title: #{darken($callout-background-warning, 20)};
 }
 
 @include darkMode {

sass/style.scss

@@ -336,6 +336,14 @@ aside.callout {
       background-color: var(--color-callout-info-background-title);
     }
   }
+
+  &.callout-warning {
+    background-color: var(--color-callout-warning-background);
+
+    h5 {
+      background-color: var(--color-callout-warning-background-title);
+    }
+  }
 }
 
 @import "components/header";