style: use callouts instead of alerts site-wide

OliverBooth/Pages/Blog/Article.cshtml

@@ -10,7 +10,7 @@
 
 @if (Model.ShowPasswordPrompt)
 {
-    <div class="alert alert-danger" role="alert">
+    <div class="callout" data-callout="danger">
         This post is private and can only be viewed by those with the password.
     </div>
 
@@ -48,13 +48,13 @@
 @switch (post.Visibility)
 {
     case Visibility.Private:
-        <div class="alert alert-danger" role="alert">
+        <div class="callout" data-callout="danger">
             This post is private and can only be viewed by those with the password.
         </div>
         break;
 
     case Visibility.Unlisted:
-        <div class="alert alert-warning" role="alert">
+        <div class="callout" data-callout="warning">
             This post is unlisted and can only be viewed by those with the link.
         </div>
         break;

OliverBooth/Pages/Contact/Index.cshtml

@@ -11,29 +11,31 @@
         if I can.
     </p>
 
-    <div class="alert alert-warning">
+    <div class="callout" data-callout="warning">
-        <p class="lead"><i class="fa-solid fa-triangle-exclamation"></i> Spam warning</p>
+        <div class="callout-title"><i data-lucide="triangle-alert"></i> Spam Warning</div>
-        <p>
+        <div class="callout-content">
             I am politely asking that you respect my inbox and keep your unsolicited advertising away. This is a simple
             request. If you send me any kind of spam after this, you have demonstrated that you do not have the basic
             human decency to respect my wishes or my privacy, and you have lost the privilege for me to respect yours. I
             <strong>will</strong> block your email address, and I will add your name to my public blacklist of spammers,
             which you can find <a asp-page="/Contact/Blacklist">here</a>.
-        </p>
+        </div>
     </div>
 
-    <div class="alert alert-info">
+    <div class="callout" data-callout="tip">
-        <p class="lead"><i class="fa-solid fa-circle-info"></i> Dear SEO marketing teams</p>
+        <div class="callout-title"><i data-lucide="info"></i> Dear SEO marketing teams</div>
-        <p>
+        <div class="callout-content">
-            I have given you enough chances. I asked that you do not send me any SEO offers or else be blocked.
+            <p>
-            Congratulations, you've been upgraded to "spammer" and will receive the same treatment as any other bad
+                I have given you enough chances. I asked that you do not send me any SEO offers or else be blocked.
-            actor sending unsolicited crap.
+                Congratulations, you've been upgraded to "spammer" and will receive the same treatment as any other bad
-        </p>
+                actor sending unsolicited crap.
-        <p>
+            </p>
-            If I receive any SEO emails, you will be added to the blacklist and your company name will be shamed too. I
+            <p>
-            will make my best efforts to ensure no one ever uses you. If you cannot respect the privacy of my inbox, I
+                If I receive any SEO emails, you will be added to the blacklist and your company name will be shamed
-            will never respect you or your company.
+                too. I will make my best efforts to ensure no one ever uses you. If you cannot respect the privacy of my
-        </p>
+                inbox, I will never respect you or your company.
+            </p>
+        </div>
     </div>
 
     <form method="post" asp-controller="Contact" asp-action="HandleForm">

OliverBooth/Pages/Privacy/FiveOClockSomewhere.cshtml

@@ -6,7 +6,7 @@
 <main class="container">
     <h1 class="display-4">@ViewData["Title"]</h1>
     <p class="lead">Last Updated: 24 September 2023</p>
-    <div class="alert alert-primary">
+    <div class="callout" data-callout="info">
         This Privacy Policy differs from the policy that applies to other applications that I published on Google Play. For
         the generalised privacy policy, please <a asp-page="/Privacy/GooglePlay">click here</a>.
     </div>

OliverBooth/Pages/Privacy/GooglePlay.cshtml

@@ -6,11 +6,11 @@
 <main class="container">
     <h1 class="display-4">@ViewData["Title"]</h1>
     <p class="lead">Last Updated: 24 September 2023</p>
-    <div class="alert alert-primary">
+    <div class="callout" data-callout="info">
         This Privacy Policy differs from the policy that applies to this website. For this website's privacy policy,
         please <a asp-page="/Privacy/Index">click here</a>.
     </div>
-    <div class="alert alert-warning">
+    <div class="callout" data-callout="warning">
         This Privacy Policy does not apply to the application <em>It's 5 O'Clock Somewhere</em>. For the privacy policy
         that applies to that application, please <a asp-page="/Privacy/FiveOClockSomewhere">click here</a>.
     </div>

OliverBooth/Pages/Privacy/Index.cshtml

@@ -6,7 +6,7 @@
 <main class="container">
     <h1 class="display-4">@ViewData["Title"]</h1>
     <p class="lead">Last Updated: 27 April 2024</p>
-    <div class="alert alert-primary">
+    <div class="callout" data-callout="info">
         This Privacy Policy differs from the policy that applies to my applications published to Google Play. For my
         applications' privacy policy, please <a asp-page="/Privacy/GooglePlay">click here</a>.
     </div>

OliverBooth/Pages/PublicServiceAnnouncement/BinaryFormatter.cshtml

@@ -1,15 +1,15 @@
 @page "/psa/binaryformatter"
 
-<div class="alert alert-danger">
+<div class="callout" data-callout="danger">
-    <h2 class="alert-heading">⚠️ Stop! This application is unsafe!</h2>
+    <div class="callout-title"><h2>⚠️ Stop! This application is unsafe!</h2></div>
     <p>
         This application is using an insecure method to read and write data, and needs to be updated
         <em>immediately</em>.
     </p>
 </div>
 
-<div class="alert alert-warning">
+<div class="callout" data-callout="warning">
-    <h4 class="alert-heading">I'm a user, what does this mean?</h4>
+    <div class="callout-title">I'm a user, what does this mean?</div>
     <p>
         If you are seeing this message, it means you loaded a payload that I crafted to exploit this vulnerability. Be
         fortunate, because I could have done much worse including stealing your data or installing malware on your
@@ -26,8 +26,8 @@
     </p>
 </div>
 
-<div class="alert alert-info">
+<div class="callout" data-callout="info">
-    <h4 class="alert-heading">I'm a developer, can you explain more?</h4>
+    <div class="callout-title">I'm a developer, can you explain more?</div>
     <p>
         <code>BinaryFormatter</code> is a .NET class that is used to serialize and deserialize data such as game saves
         or configuration files. However, it was discovered that this class is vulnerable to remote code execution when

src/scss/markdown-callouts.scss

@@ -22,6 +22,11 @@ $callout-fg-grey: #9e9e9e;
 
   .callout-title {
     font-weight: bold;
+    margin-bottom: 1rem;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
   }
 
   &[data-callout="note"] {