Added color to callout varieties

assets/css/v2/style.css

@@ -25,6 +25,12 @@
   --color-divider: #cccccc;
   --color-tabs-divider: #00000033;
   --color-codeblock-code-with-comment: #00963926;
+  --color-callout-warning-primary: 0.65 0.188 24;
+  --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
+  --color-callout-caution-primary: 0.8 0.1613 71.21;
+  --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
+  --color-callout-important-primary: 0.36 0 0;
+  --color-callout-important-shadow: 0.23 0 0 / 7.06%;
 
   --code-copy-icon-height: 1rem;
   --code-copy-icon-width: 1rem;
@@ -1108,6 +1114,52 @@ blockquote ul {
   margin: 0 0 1rem 1rem;
 }
 
+blockquote.call-out {
+  padding: 0.5rem;
+
+  .call-out-type {
+    display: block;
+    padding: 0.25rem 0.5rem;
+    margin: -0.5rem 0 0.5rem -0.5rem;
+    width: calc(100% + 1rem);
+    font-weight: 500;
+  }
+
+  br {
+    display: none;
+  }
+}
+
+blockquote.caution {
+  --color-shadow: oklch(var(--color-callout-caution-shadow));
+  border: 1px solid oklch(var(--color-callout-caution-primary));
+
+  .call-out-type {
+    background-color: oklch(var(--color-callout-caution-shadow));
+    border-bottom: 1px solid oklch(var(--color-callout-caution-primary));
+  }
+}
+
+blockquote.warning {
+  --color-shadow: oklch(var(--color-callout-warning-shadow));
+  border: 1px solid oklch(var(--color-callout-warning-primary));
+
+  .call-out-type {
+    background-color: oklch(var(--color-callout-warning-shadow));
+    border-bottom: 1px solid oklch(var(--color-callout-warning-primary));
+  }
+}
+
+blockquote.important {
+  --color-shadow: oklch(var(--color-callout-important-shadow));
+  border: 1px solid oklch(var(--color-callout-important-primary));
+
+  .call-out-type {
+    background-color: oklch(var(--color-callout-important-shadow));
+    border-bottom: 1px solid oklch(var(--color-callout-important-primary));
+  }
+}
+
 /* Tabs */
 .tabs-container {
   /* border-bottom: 1px solid black; */

exampleSite/content/test-product/_index.md

@@ -1,5 +1,5 @@
 ---
 description: Test pages for nginx-hugo-theme
-title: Test pages for nginx-hugo-theme
+title: Test pages
 weight: 100
 ---

exampleSite/content/test-product/call-out/all-callouts.md

@@ -0,0 +1,65 @@
+
+---
+description: All Callouts
+title: All Callouts
+weight: 100
+---
+
+
+## Plain Callouts
+These are the main callout types that may be used to bring attention to a section of text. You should prefer to use [Side Callouts](#side-callouts) instead.
+
+{{<call-out>}}
+This is a plain callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>`.
+{{</call-out>}}
+
+{{<call-out "" "Custom title">}}
+This is a plain callout with a title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with a custom title parameter.
+{{</call-out>}}
+
+{{<before-you-begin>}}
+This is a plain callout with a default title for its type. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<before-you-begin>`.
+{{</before-you-begin>}}
+
+## Side Callouts
+
+Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.
+
+{{<call-out "side-callout">}}
+This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.
+{{</call-out>}}
+
+When designing effective web layouts, it's important to maintain proper balance between primary content and supplementary elements. Callouts serve as attention-grabbing devices that highlight key information, but they should remain subordinate to the main content flow. This hierarchy helps users navigate your page intuitively, guiding their attention appropriately. A well-designed callout complements the surrounding text rather than competing with it.
+
+Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience.
+
+{{<call-out "side-callout" "Custom title">}}
+This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class, and a custom title.
+{{</call-out>}}
+
+## Important, but not urgent
+
+This is a weird exception callout that adds just a little extra contrast to the callout.
+
+{{<important>}}
+This is an Important callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title.
+{{</important>}}
+
+## Loud Callouts
+
+These callouts should be used sparingly: only when it is imperative to capture the user's attention.
+
+{{<caution>}}
+This is a Caution callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<caution>` shortcode. It has no custom title.
+{{</caution>}}
+
+This callout especially should be used **VERY** judiciously.
+
+{{<warning>}}
+This is a Warning callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title.
+{{</warning>}}
+
+
+{{<call-out "warning" "Custom warning title">}}
+This is a Warning callout with a custom title. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<call-out>` shortcode with the `.warning` class, and a custom title.
+{{</call-out>}}

exampleSite/hugo.toml

@@ -1,6 +1,6 @@
 baseURL = 'https://nginx.org'
 languageCode = 'en-us'
-title = 'nginx-hugo-theme example site'
+title = 'Example Site'
 
 
 [module]

layouts/shortcodes/caution.html

@@ -1,3 +1,3 @@
-<blockquote class="caution">
-  <div><strong>Caution:</strong><br/> {{ .Inner | markdownify }}</div>
+<blockquote class="caution call-out">
+  <div><strong class="call-out-type">Caution</strong><br/> {{ .Inner | markdownify }}</div>
 </blockquote>

layouts/shortcodes/deprecated.html

@@ -1,3 +1,3 @@
-<blockquote class="warning">
-  <div><strong>Deprecated:</strong><br/> {{ .Inner | markdownify }}</div>
+<blockquote class="warning call-out">
+  <div><strong class="call-out-type">Deprecated</strong><br/> {{ .Inner | markdownify }}</div>
 </blockquote>

layouts/shortcodes/important.html

@@ -1,3 +1,3 @@
-<blockquote class="important">
-  <div><strong>Important:</strong><br/> {{ .Inner | markdownify }}</div>
+<blockquote class="important call-out">
+  <div><strong class="call-out-type">Important</strong><br/> {{ .Inner | markdownify }}</div>
 </blockquote>

layouts/shortcodes/warning.html

@@ -1,3 +1,3 @@
-<blockquote class="warning">
-  <div><strong>Warning:</strong><br/> {{ .Inner | markdownify }}</div>
+<blockquote class="warning call-out">
+  <div><strong class="call-out-type">Warning</strong><br/> {{ .Inner | markdownify }}</div>
 </blockquote>