From 4febf7471debca6e26f7eed211bd062f895d29df Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Sat, 8 Aug 2020 15:41:20 +0100
Subject: [PATCH] Improve styling for callouts

Update styles for callouts (warning, caution, note); also avoid applying
callout-specific styles to general block quotes.
---
 assets/scss/_custom.scss                      | 38 ++++++++++++-------
 layouts/partials/css.html                     |  2 +-
 layouts/shortcodes/caution.html               |  2 +-
 .../shortcodes/deprecationfilewarning.html    |  2 +-
 layouts/shortcodes/note.html                  |  2 +-
 layouts/shortcodes/warning.html               |  2 +-
 .../css/{callouts.css => feature-states.css}  | 21 ----------
 7 files changed, 30 insertions(+), 39 deletions(-)
 rename static/css/{callouts.css => feature-states.css} (67%)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 563d87272f..447cca40c7 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -268,22 +268,34 @@ main {
 
 // blockquotes and callouts
 
-blockquote {
-  padding: 0.4rem 0.4rem 0.4rem 1rem !important;
-}
+.td-content, body {
+  blockquote.callout {
+    padding: 0.4rem 0.4rem 0.4rem 1rem;
+    border: 1px solid #eee;
+    border-left-width: 0.5em;
+    background: #fff;
+    color: #000;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  blockquote.callout {
+    border-radius: calc(1em/3);
+  }
+  .callout.caution {
+    border-left-color: #f0ad4e;
+  }
 
-// callouts are contained in static CSS as well. these require override.
+  .callout.note {
+    border-left-color: #428bca;
+  }
 
-.caution {
-  border-left-color: #f0ad4e !important;
-}
+  .callout.warning {
+    border-left-color: #d9534f;
+  }
 
-.note {
-  border-left-color: #428bca !important;
-}
-
-.warning {
-  border-left-color: #d9534f !important;
+  h1:first-of-type + blockquote.callout {
+    margin-top: 1.5em;
+  }
 }
 
 .deprecation-warning {
diff --git a/layouts/partials/css.html b/layouts/partials/css.html
index c28d682e1f..8b4bf37e86 100644
--- a/layouts/partials/css.html
+++ b/layouts/partials/css.html
@@ -16,7 +16,7 @@
 {{- end }}
 
 <link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
-<link rel="stylesheet" href="{{ "css/callouts.css" | relURL }}">
+<link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
 {{- if .Site.Params.announcement }}
 <link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">
diff --git a/layouts/shortcodes/caution.html b/layouts/shortcodes/caution.html
index 2d14447142..82563d8c2c 100644
--- a/layouts/shortcodes/caution.html
+++ b/layouts/shortcodes/caution.html
@@ -1,3 +1,3 @@
-<blockquote class="caution">
+<blockquote class="caution callout">
   <div><strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
 </blockquote>
diff --git a/layouts/shortcodes/deprecationfilewarning.html b/layouts/shortcodes/deprecationfilewarning.html
index 48e2f43c98..71583c4c96 100644
--- a/layouts/shortcodes/deprecationfilewarning.html
+++ b/layouts/shortcodes/deprecationfilewarning.html
@@ -1,3 +1,3 @@
-<blockquote class="deprecation_file_warning">
+<blockquote class="deprecation_file_warning callout">
   <div><h4>{{ T "deprecation_file_warning" }}</h4> {{ .Inner | markdownify }}</div>
 </blockquote>
diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html
index 1161c2366c..eba93f8b7e 100644
--- a/layouts/shortcodes/note.html
+++ b/layouts/shortcodes/note.html
@@ -1,3 +1,3 @@
-<blockquote class="note">
+<blockquote class="note callout">
   <div><strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
 </blockquote>
\ No newline at end of file
diff --git a/layouts/shortcodes/warning.html b/layouts/shortcodes/warning.html
index ddd5ff197f..a6a5f67abd 100644
--- a/layouts/shortcodes/warning.html
+++ b/layouts/shortcodes/warning.html
@@ -1,3 +1,3 @@
-<blockquote class="warning">
+<blockquote class="warning callout">
   <div><strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
 </blockquote>
diff --git a/static/css/callouts.css b/static/css/feature-states.css
similarity index 67%
rename from static/css/callouts.css
rename to static/css/feature-states.css
index ffc61ed4a5..725cf9e0fc 100644
--- a/static/css/callouts.css
+++ b/static/css/feature-states.css
@@ -1,24 +1,3 @@
-/* Callouts */
-.caution, .note, .warning {
-    padding: 20px;
-    margin: 20px 0;
-    border: 1px solid #eee;
-    border-left-width: 5px;
-    border-radius: 3px;
-}
-
-.caution {
-    border-left-color: #f0ad4e;
-}
-
-.note {
-    border-left-color: #428bca;
-}
-
-.warning {
-    border-left-color: #d9534f;
-}
-
 /* Feature States */
 
 .beta, .stable, .alpha, .deprecated {