Render blockquotes in a figure

Render cite and caption too.

assets/css/000_reset.css

@@ -12,7 +12,7 @@
  ********/
 
 
-figure, h1, h2, h3, h4, h5, h6, p, pre {
+blockquote, figure, h1, h2, h3, h4, h5, h6, p, pre {
     margin: 0;
     padding: 0;
 }

assets/css/010_spacing.css

@@ -61,7 +61,7 @@ p + p {
 
 /* Figures */
 
-{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}}
+{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--main-column, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}}
 
 p + :is({{ $elementsWithXLBlockMargins }}) {
     margin-block-start: var(--space-xl);

assets/css/050_figures.css

@@ -29,6 +29,25 @@
   > a:has(img:only-child) {
     grid-column: wide-gutter-start / wide-gutter-end;
   }
+
+  .figure__caption--blockquote {
+    font-size: inherit;
+    margin-inline-start: var(--space-m);
+
+    blockquote + & {
+      margin-block-start: var(--space-m);
+    }
+
+    &::before {
+      color: var(--text-color-secondary);
+      content: "--";
+    }
+  }
+}
+
+
+.figure--main-column {
+  grid-column: main-start / main-end;
 }
 
 

assets/css/050_quotations.css

@@ -7,7 +7,7 @@
  * QUOTATIONS
  *************/
 
-blockquote {
+.figure--blockquote, :not(.figure--blockquote) > blockquote {
   --border-width: var(--space-xs);
   --inline-padding: var(--space-l);
 

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,11 @@
+<figure class="figure  figure--main-column  figure--blockquote">
+  <blockquote
+    {{- with .Attributes.cite }} cite="{{ . }}"{{ end -}}>
+    {{ .Text }}
+  </blockquote>
+  {{ with .Attributes.caption }}
+    <figcaption class="figure__caption--blockquote">
+      {{ . | safeHTML }}
+    </figcaption>
+  {{ end }}
+</figure>