From 6ece82ebc04f3f3b413abcfcb6994d26b0abf7ab Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Wed, 29 Nov 2023 12:34:55 -0500
Subject: [PATCH] Enhance blockquote style for larger screens

---
 _includes/styles/base.scss | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index 33a80a0..4d685bf 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -130,40 +130,55 @@ blockquote {
   border-radius: 5px;
   border: 1px solid var(--color-black);
   border-left: 3rem solid var(--color-black);
-  padding: 1rem;
-  margin: 1rem 0;
+  padding: 1em;
+  margin: 1em 0;
+  @media screen and (min-width: 48rem) {
+    border-left: 4rem solid var(--color-black);
+  }
   &::before {
+    display: block;
     position: absolute;
+    height: 24px;
+    width: 24px;
     top: 50%;
     margin-top: -12px;
     left: calc(-0.75rem - 24px);
     filter: var(--filter-bg);
-    content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/quote.svg");
+    content: "";
+    background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/quote.svg");
+    background-repeat: no-repeat !important;
+    background-size: contain !important;
+    @media screen and (min-width: 48rem) {
+      margin-top: -16px;
+      left: calc(-1rem - 32px);
+      height: 32px;
+      width: 32px;
+    }
   }
   &.info {
     &::before {
-      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg");
+      background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg");
     }
     color: var(--color-blue);
     border-color: var(--color-blue);
   }
   &.success {
     &::before {
-      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/check.svg");
+      background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/check.svg");
     }
     color: var(--color-success);
     border-color: var(--color-success);
   }
   &.warning {
     &::before {
-      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/alert-triangle.svg");
+      background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/alert-triangle.svg");
     }
     color: var(--color-warn);
     border-color: var(--color-warn);
   }
   &.danger {
     &::before {
-      content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/circle-x.svg");
+      background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/circle-x.svg");
     }
     color: var(--color-error);
     border-color: var(--color-error);