From 398ce2fa13f43e073c4daca7dc645486a569e6a7 Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Thu, 3 Aug 2023 20:50:31 -0400
Subject: [PATCH] Update `blockquote` styles

There are now styles for each variant:

- Regular
- Info
- Success
- Warning
- Danger
---
 _includes/styles/base.scss | 52 ++++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index becee92..c3badf2 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -97,21 +97,51 @@ .inline {
 }
 
 blockquote {
-  border-left: 2px solid var(--color-green);
-  padding-left: 1rem;
-  strong.highlight {
-    color: var(--color-green);
+  position: relative;
+  border-radius: 5px;
+  border: 1px solid var(--color-black);
+  border-left: 3rem solid var(--color-black);
+  padding: 1rem;
+  margin: 1rem 0;
+  &::before {
+    position: absolute;
+    top: 50%;
+    margin-top: -12px;
+    left: calc(-0.75rem - 24px);
+    content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/quote.svg");
   }
-  &.warn {
-    border-left-color: var(--color-warn);
-    strong.highlight {
-      color: var(--color-warn);
+  &.info {
+    &::before {
+      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/info-circle.svg");
     }
+    color: var(--color-blue);
+    border-color: var(--color-blue);
+  }
+  &.success {
+    &::before {
+      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/check.svg");
+    }
+    color: var(--color-green);
+    border-color: var(--color-green);
+  }
+  &.warning {
+    &::before {
+      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/alert-triangle.svg");
+    }
+    color: var(--color-warn);
+    border-color: var(--color-warn);
   }
   &.danger {
-    border-left-color: var(--color-error);
-    strong.highlight {
-      color: var(--color-error);
+    &::before {
+      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/circle-x.svg");
     }
+    color: var(--color-error);
+    border-color: var(--color-error);
+  }
+  > p:first-child {
+    margin-top: 0;
+  }
+  > p:last-child {
+    margin-bottom: 0;
   }
 }