Style blockquote and unordered lists

Author: rossta

app/javascript/css/components/article-content.css

@@ -19,6 +19,8 @@
     margin-inline-start: auto;
     overflow: visible;
     position: relative;
+    margin-top: var(--space-m);
+    margin-bottom: var(--space-m);
   }
 
   & hr:before {
@@ -60,4 +62,48 @@
     z-index: 100;
     max-width: calc(var(--grid-max-width) / 3);
   }
+
+  & ul {
+    list-style-type: disc;
+    padding-inline-start: var(--space-s);
+
+    & li:has(+ li) {
+      margin-bottom: var(--space-s);
+    }
+  }
+
+  & blockquote {
+    font-size: var(--step-1);
+    font-style: italic;
+    padding: var(--space-m) 30px var(--space-m) 75px;
+    border-left: var(--space-3xs) solid var(--joy-color-quote);
+    line-height: 1.6;
+    position: relative;
+    background: var(--joy-background-blockquote);
+
+    & p:has(+ p) {
+      margin-bottom: var(--space-m);
+    }
+  }
+
+  & blockquote::before {
+    font-family: Arial;
+    content: '\201C';
+    color: var(--joy-color-quote);
+    font-size: 4em;
+    position: absolute;
+    left: 10px;
+    top: -10px;
+  }
+
+  blockquote::after {
+    content: '';
+  }
+
+  & blockquote span {
+    display: block;
+    font-style: normal;
+    font-weight: bold;
+    margin-top: var(--space-s);
+  }
 }

app/javascript/css/config/theme.css

@@ -31,6 +31,7 @@
   --joy-background-header: var(--joy-color-200);
   --joy-background-banner: var(--joy-color-100);
   --joy-background-footer: var(--joy-color-200);
+  --joy-background-blockquote: var(--joy-color-100);
 
   --joy-background-mask: var(--color-darken);
   --joy-background-reset: white;
@@ -42,6 +43,7 @@
   --joy-background-inline-code: ghostwhite;
 
   --joy-border-subtle: var(--joy-color-200);
+  --joy-color-quote: var(--joy-color-600);
 
   --joy-text: var(--color-dark);
   --joy-text-subtle: var(--color-stone-700);
@@ -73,6 +75,7 @@
   --joy-background-header: var(--color-slate-800);
   --joy-background-banner: var(--color-slate-900);
   --joy-background-footer: var(--color-slate-800);
+  --joy-background-blockquote: var(--color-slate-800);
 
   --joy-background-mask: var(--color-lighten);
   --joy-background-reset: var(--color-slate-950);