feat(ui): new blockquote style

2 files changed, 26 insertions, 2 deletions

diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss
index 0e5a48c..cf1d82a 100644
--- a/assets/css/_markdown.scss
+++ b/assets/css/_markdown.scss
@@ -204,6 +204,30 @@
     }
   }
 
+  blockquote.quoted {
+    position: relative;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    &::before, &::after {
+      color: var(--secondary-text-color);
+      position: absolute;
+      font-weight: 800;
+      font-size: 1.2em;
+    }
+
+    &::before { 
+      content: "“";
+      top: 0;
+      left: -1.1rem
+    }
+
+    &::after { 
+      content: "”";
+      right: -1.1rem;
+      bottom: 0;
+    }
+  }
+
   /* footnotes */
 
   .inline-footnote {
diff --git a/layouts/_markup/render-blockquote.html b/layouts/_markup/render-blockquote.html
index 79f57a8..2dff9b8 100644
--- a/layouts/_markup/render-blockquote.html
+++ b/layouts/_markup/render-blockquote.html
@@ -24,7 +24,7 @@
     </div>
   </blockquote>
 {{ else }}
-  <blockquote class="text-secondary p-0 m-0 ml-[1em]">
-    {{ .Text }}
+  <blockquote class="quoted p-0 m-0 mx-[1em]">
+      {{ .Text }}
   </blockquote>
 {{ end }}