feat: blockquote block

blocks/blockquote/blockquote.css

@@ -0,0 +1,16 @@
+main .blockquote blockquote {
+  margin-left: 0;
+  margin-right: 0;
+  font-size: var(--body-font-size-xs);
+}
+
+main .blockquote blockquote q {
+  quotes: "“" "”" "‘" "’" ;
+  color: var(--color-blue);
+}
+
+@media (min-width: 700px) {
+  main .blockquote blockquote {
+    font-size: var(--body-font-size-s);
+  }
+}

blocks/blockquote/blockquote.js

@@ -0,0 +1,17 @@
+export default async function decorate(block) {
+  const quotes = block.querySelectorAll('h2');
+  const ps = block.querySelectorAll('p');
+  block.innerHTML = '';
+
+  const wrapper = document.createElement('blockquote');
+  quotes.forEach((quote) => {
+    const q = document.createElement('q');
+    q.innerHTML = quote.innerHTML;
+    wrapper.append(q);
+  });
+  ps.forEach((p) => {
+    wrapper.append(p);
+  });
+
+  block.append(wrapper);
+}

styles/styles.css

@@ -248,23 +248,6 @@ main pre {
   white-space: pre;
 }
 
-main blockquote {
-  font-style: italic;
-  margin: 3rem;
-  text-indent: -1rem;
-  hanging-punctuation: first;
-}
-
-main blockquote p::before {
-  content: "“";
-  line-height: 0;
-}
-
-main blockquote p::after {
-  content: "”";
-  line-height: 0;
-}
-
 hr {
   margin-top: 1.5em;
   margin-bottom: 1.5em;