From 4a57e58ab4b61ca4276a03fbbc971603cad66880 Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Wed, 13 Oct 2021 01:10:58 +0100
Subject: [PATCH] Use Docsy alert classes

Update the Kubernetes overrides from the Docsy theme to diverge less,
specifically in the areas of callouts (alerts) and pageinfo blocks.
---
 assets/scss/_custom.scss                  | 35 ++++++++++++++---------
 layouts/partials/deprecation-warning.html |  2 +-
 layouts/shortcodes/caution.html           |  6 ++--
 layouts/shortcodes/note.html              |  6 ++--
 layouts/shortcodes/warning.html           |  7 +++--
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 20a36b6175..03701db994 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -313,33 +313,40 @@ main {
 
 // blockquotes and callouts
 
-.td-content, body {
-  blockquote.callout {
+body {
+  .alert {
+    // Override Docsy styles
     padding: 0.4rem 0.4rem 0.4rem 1rem;
-    border: 1px solid #eee;
-    border-left-width: 0.5em;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    border-right: 1px solid #eee;
+    border-radius: 0.25em;
+    border-left-width: 0.5em; // fallback in case calc() is missing
     background: #fff;
     color: #000;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
   }
-  blockquote.callout {
-    border-radius: calc(1em/3);
+  // Set minimum width and radius for alert color
+  .alert {
+      border-left-width: calc(max(0.5em, 4px));
+      border-top-left-radius: calc(max(0.5em, 4px));
+      border-bottom-left-radius: calc(max(0.5em, 4px));
   }
-  .callout.caution {
+  .alert.callout.caution {
     border-left-color: #f0ad4e;
   }
-
-  .callout.note {
+  .alert.callout.note {
     border-left-color: #428bca;
   }
-
-  .callout.warning {
+  .alert.callout.warning {
     border-left-color: #d9534f;
   }
+  .alert.third-party-content {
+    border-left-color: #444;
+  }
 
-
-  h1:first-of-type + blockquote.callout {
+  h1:first-of-type + .alert.callout {
     margin-top: 1.5em;
   }
 }
@@ -367,7 +374,7 @@ main {
   background: #f8f9cb;
 }
 
-.deprecation-warning {
+.deprecation-warning, .pageinfo.deprecation-warning {
     padding: 20px;
     margin: 20px 0;
     background-color: #faf5b6;
diff --git a/layouts/partials/deprecation-warning.html b/layouts/partials/deprecation-warning.html
index 6b5bc1f2e2..14261d73dd 100644
--- a/layouts/partials/deprecation-warning.html
+++ b/layouts/partials/deprecation-warning.html
@@ -1,6 +1,6 @@
 {{ if (.Site.Param "deprecated") }}
 <section id="deprecation-warning">
-  <div class="content deprecation-warning">
+  <div class="content deprecation-warning pageinfo">
     <h3>
       {{ T "deprecation_title" }} {{ .Param "version" }}
     </h3>
diff --git a/layouts/shortcodes/caution.html b/layouts/shortcodes/caution.html
index 82563d8c2c..6df243b7c0 100644
--- a/layouts/shortcodes/caution.html
+++ b/layouts/shortcodes/caution.html
@@ -1,3 +1,3 @@
-<blockquote class="caution callout">
-  <div><strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
-</blockquote>
+<div class="alert alert-warning caution callout" role="alert">
+  <strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}
+</div>
diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html
index eba93f8b7e..8362b1f33f 100644
--- a/layouts/shortcodes/note.html
+++ b/layouts/shortcodes/note.html
@@ -1,3 +1,3 @@
-<blockquote class="note callout">
-  <div><strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
-</blockquote>
\ No newline at end of file
+<div class="alert alert-info note callout" role="alert">
+  <strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/warning.html b/layouts/shortcodes/warning.html
index a6a5f67abd..ec4639bd16 100644
--- a/layouts/shortcodes/warning.html
+++ b/layouts/shortcodes/warning.html
@@ -1,3 +1,4 @@
-<blockquote class="warning callout">
-  <div><strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
-</blockquote>
+<div class="alert alert-danger warning callout" role="alert">
+  <strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}
+</div>
+