From eb13d1de07cae3d4808cef1ac1af23e97f5c0133 Mon Sep 17 00:00:00 2001
From: Ryan Parman <ryan@ryanparman.com>
Date: Fri, 13 Dec 2024 13:30:37 -0700
Subject: [PATCH] Tweaking styles.

---
 assets/css/_tailwind.css                      | 68 ++++++++++++++++++-
 .../_default/_markup/render-blockquote.html   | 20 ++++++
 layouts/shortcodes/param-kind.html            |  2 +
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 layouts/_default/_markup/render-blockquote.html

diff --git a/assets/css/_tailwind.css b/assets/css/_tailwind.css
index 6868f94..a24e953 100644
--- a/assets/css/_tailwind.css
+++ b/assets/css/_tailwind.css
@@ -45,11 +45,71 @@
   }
 
   #tmpl-single blockquote {
-    @apply my-1
+    @apply my-1 p-4 bg-gray-100 dark:bg-black border-l-blue-700 dark:border-l-blue-300 border-l-4
   }
 
   #tmpl-single blockquote p {
-    @apply mt-1 text-sm/6 text-gray-500 not-italic font-normal
+    @apply mt-1 text-sm/5 text-gray-500 dark:text-gray-300 not-italic font-normal
+  }
+
+  #tmpl-single blockquote.alert {
+    border-width: 1px 1px 1px 5px;
+    border-style: solid;
+    padding: 1rem;
+    margin: 1rem 0;
+  }
+
+  #tmpl-single blockquote.alert p::before,
+  #tmpl-single blockquote.alert p::after {
+    content: "";
+  }
+
+  #tmpl-single blockquote.alert p {
+    @apply m-0 py-1
+  }
+
+  #tmpl-single blockquote.alert p.alert-heading {
+    @apply text-base/4 font-semibold py-2 px-0 m-0
+  }
+
+  #tmpl-single blockquote.alert.alert-caution {
+    @apply bg-rose-50 dark:bg-rose-950 border-rose-700 dark:border-rose-300
+  }
+
+  #tmpl-single blockquote.alert.alert-caution p {
+    @apply text-rose-700 dark:text-rose-300
+  }
+
+  #tmpl-single blockquote.alert.alert-important {
+    @apply bg-fuchsia-50 dark:bg-fuchsia-950 border-fuchsia-700 dark:border-fuchsia-300
+  }
+
+  #tmpl-single blockquote.alert.alert-important p {
+    @apply text-fuchsia-700 dark:text-fuchsia-300
+  }
+
+  #tmpl-single blockquote.alert.alert-note {
+    @apply bg-blue-50 dark:bg-blue-950 border-blue-700 dark:border-blue-300
+  }
+
+  #tmpl-single blockquote.alert.alert-note p {
+    @apply text-blue-700 dark:text-blue-300
+  }
+
+  #tmpl-single blockquote.alert.alert-tip {
+    @apply bg-emerald-50 dark:bg-emerald-950 border-emerald-700 dark:border-emerald-300
+  }
+
+  #tmpl-single blockquote.alert.alert-tip p {
+    @apply text-emerald-700 dark:text-emerald-300
+  }
+
+  #tmpl-single blockquote.alert.alert-warning {
+    @apply bg-amber-50 dark:bg-amber-950 border-amber-700 dark:border-amber-300
+  }
+
+  #tmpl-single blockquote.alert.alert-warning p {
+    @apply text-amber-700 dark:text-amber-300
   }
 
   #tmpl-single div.footnotes * {
@@ -66,6 +126,10 @@
     @apply inline-block m-0 p-0 max-w-none object-scale-down h-[1rem] align-middle;
   }
 
+  .table-question-mark {
+    @apply h-5 w-5 inline-block text-blue-700 dark:text-blue-300;
+  }
+
   .ui-link {
     @apply text-indigo-600 hover:text-blue-400 underline decoration-dotted hover:decoration-solid underline-offset-4;
   }
diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html
new file mode 100644
index 0000000..9aa29ca
--- /dev/null
+++ b/layouts/_default/_markup/render-blockquote.html
@@ -0,0 +1,20 @@
+{{ $emoji := dict
+  "caution"   "heroicons/solid/exclamation-triangle"
+  "important" "heroicons/solid/check-circle"
+  "note"      "heroicons/solid/information-circle"
+  "tip"       "heroicons/solid/light-bulb"
+  "warning"   "heroicons/solid/exclamation-triangle"
+}}
+
+{{ if eq .Type "alert" }}
+  <blockquote class="alert alert-{{ .AlertType }}">
+    <p class="alert-heading">
+      {{ partial (printf "%s.svg" (index $emoji .AlertType)) (dict "class" "h-5 w-5 inline-block align-middle") }}{{ with .AlertTitle }}{{ . }}{{ else }}{{ .AlertType | upper }}{{ end }}
+    </p>
+    {{ .Text }}
+  </blockquote>
+{{ else }}
+  <blockquote>
+    {{ .Text }}
+  </blockquote>
+{{ end }}
diff --git a/layouts/shortcodes/param-kind.html b/layouts/shortcodes/param-kind.html
index e9d40ae..8d383bc 100644
--- a/layouts/shortcodes/param-kind.html
+++ b/layouts/shortcodes/param-kind.html
@@ -5,6 +5,8 @@
   Authentication signature
 {{- else if eq $kind "encryption-algo" -}}
   Encryption algorithm
+{{- else if eq $kind "mode" -}}
+  Mode of operation
 {{- else if eq $kind "hash" -}}
   Hashing function
 {{- end -}}