From b0f065814868bf515faedbe370639908cdf67265 Mon Sep 17 00:00:00 2001
From: Oliver Booth <git@olivr.me>
Date: Sat, 4 May 2024 00:59:02 +0100
Subject: [PATCH] style: use callouts instead of alerts site-wide

---
 OliverBooth/Pages/Blog/Article.cshtml         |  6 ++--
 OliverBooth/Pages/Contact/Index.cshtml        | 34 ++++++++++---------
 .../Pages/Privacy/FiveOClockSomewhere.cshtml  |  2 +-
 OliverBooth/Pages/Privacy/GooglePlay.cshtml   |  4 +--
 OliverBooth/Pages/Privacy/Index.cshtml        |  2 +-
 .../BinaryFormatter.cshtml                    | 12 +++----
 src/scss/markdown-callouts.scss               |  5 +++
 7 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/OliverBooth/Pages/Blog/Article.cshtml b/OliverBooth/Pages/Blog/Article.cshtml
index d29588b..bdc3ee5 100644
--- a/OliverBooth/Pages/Blog/Article.cshtml
+++ b/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;
diff --git a/OliverBooth/Pages/Contact/Index.cshtml b/OliverBooth/Pages/Contact/Index.cshtml
index f6d101d..12d5f70 100644
--- a/OliverBooth/Pages/Contact/Index.cshtml
+++ b/OliverBooth/Pages/Contact/Index.cshtml
@@ -11,29 +11,31 @@
         if I can.
     </p>
 
-    <div class="alert alert-warning">
-        <p class="lead"><i class="fa-solid fa-triangle-exclamation"></i> Spam warning</p>
-        <p>
+    <div class="callout" data-callout="warning">
+        <div class="callout-title"><i data-lucide="triangle-alert"></i> Spam Warning</div>
+        <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">
-        <p class="lead"><i class="fa-solid fa-circle-info"></i> Dear SEO marketing teams</p>
-        <p>
-            I have given you enough chances. I asked that you do not send me any SEO offers or else be blocked.
-            Congratulations, you've been upgraded to "spammer" and will receive the same treatment as any other bad
-            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
-            will make my best efforts to ensure no one ever uses you. If you cannot respect the privacy of my inbox, I
-            will never respect you or your company.
-        </p>
+    <div class="callout" data-callout="tip">
+        <div class="callout-title"><i data-lucide="info"></i> Dear SEO marketing teams</div>
+        <div class="callout-content">
+            <p>
+                I have given you enough chances. I asked that you do not send me any SEO offers or else be blocked.
+                Congratulations, you've been upgraded to "spammer" and will receive the same treatment as any other bad
+                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 will make my best efforts to ensure no one ever uses you. If you cannot respect the privacy of my
+                inbox, I will never respect you or your company.
+            </p>
+        </div>
     </div>
 
     <form method="post" asp-controller="Contact" asp-action="HandleForm">
diff --git a/OliverBooth/Pages/Privacy/FiveOClockSomewhere.cshtml b/OliverBooth/Pages/Privacy/FiveOClockSomewhere.cshtml
index 7a345f2..5c5365a 100644
--- a/OliverBooth/Pages/Privacy/FiveOClockSomewhere.cshtml
+++ b/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>
diff --git a/OliverBooth/Pages/Privacy/GooglePlay.cshtml b/OliverBooth/Pages/Privacy/GooglePlay.cshtml
index befca57..37caca9 100644
--- a/OliverBooth/Pages/Privacy/GooglePlay.cshtml
+++ b/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>
diff --git a/OliverBooth/Pages/Privacy/Index.cshtml b/OliverBooth/Pages/Privacy/Index.cshtml
index ebf7923..d4afbd3 100644
--- a/OliverBooth/Pages/Privacy/Index.cshtml
+++ b/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>
diff --git a/OliverBooth/Pages/PublicServiceAnnouncement/BinaryFormatter.cshtml b/OliverBooth/Pages/PublicServiceAnnouncement/BinaryFormatter.cshtml
index bb8134e..c014ab6 100644
--- a/OliverBooth/Pages/PublicServiceAnnouncement/BinaryFormatter.cshtml
+++ b/OliverBooth/Pages/PublicServiceAnnouncement/BinaryFormatter.cshtml
@@ -1,15 +1,15 @@
 @page "/psa/binaryformatter"
 
-<div class="alert alert-danger">
-    <h2 class="alert-heading">⚠️ Stop! This application is unsafe!</h2>
+<div class="callout" data-callout="danger">
+    <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">
-    <h4 class="alert-heading">I'm a user, what does this mean?</h4>
+<div class="callout" data-callout="warning">
+    <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">
-    <h4 class="alert-heading">I'm a developer, can you explain more?</h4>
+<div class="callout" data-callout="info">
+    <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
diff --git a/src/scss/markdown-callouts.scss b/src/scss/markdown-callouts.scss
index 7a77be0..7fd94c6 100644
--- a/src/scss/markdown-callouts.scss
+++ b/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"] {