diff --git a/blocks/quote/quote.css b/blocks/quote/quote.css new file mode 100644 index 0000000..019a662 --- /dev/null +++ b/blocks/quote/quote.css @@ -0,0 +1,30 @@ +.block.quote { + background-color: #ccc; + padding: 0 0 24px; + display: flex; + flex-direction: column; + margin: 1rem 0; +} + +.block.quote blockquote { + margin: 16px; + text-indent: 0; +} + +.block.quote > div:last-child > div { + margin: 0 16px; + font-size: small; + font-style: italic; + position: relative; +} + +.block.quote > div:last-child > div::after { + content: ""; + display: block; + position: absolute; + left: 0; + bottom: -8px; + height: 5px; + width: 30px; + background-color: darkgray; +} diff --git a/blocks/quote/quote.js b/blocks/quote/quote.js new file mode 100644 index 0000000..7c02344 --- /dev/null +++ b/blocks/quote/quote.js @@ -0,0 +1,8 @@ +export default function decorate(block) { + const [quoteWrapper] = block.children; + + const blockquote = document.createElement('blockquote'); + blockquote.textContent = quoteWrapper.textContent.trim(); + quoteWrapper.replaceChildren(blockquote); + } + \ No newline at end of file