I added this to my Casper CSS today. Maybe it’ll help someone. Or if anyone knows a better way to do this, please let me know.
I found that multi-paragraph blockquotes (created with the markdown card) didn’t have visual separation between the paragraphs. And for nested blockquotes, it does indent them but I prefer a visible left border to show how many times it’s nested.
/* add left borders on nested blockquotes */
blockquote > blockquote {
border-left: 0.3rem solid var(--ghost-accent-color);
margin: 0;
}
/* within a blockquote, a paragraph or blockquote followed by a paragraph should have a top margin on the following paragraph*/
blockquote p + p, blockquote blockquote + p {
margin-block-start: 1em;
}
Example post with results that look fine to me:
It can also be nice to have each level of blockquote nesting change colors, just like is typical in email clients. I might add that to my Casper theme in the future. Here’s how I did that on another site in case it’s useful for someone:
body blockquote, blockquote.bq1 { background-color: #FFF6DB; border-color: #ffc929; }
body blockquote blockquote, blockquote.secondary, blockquote.bq2 { background-color: #e8ffe8; border-color: #00cf00; }
body blockquote blockquote blockquote, blockquote.tertiary, blockquote.bq3 { background-color: #efefff; border-color: #3d3dff; }
body blockquote blockquote blockquote blockquote, blockquote.bq4 { background-color: #fdd; border-color: #ff2b2b; }
body blockquote blockquote blockquote blockquote blockquote, blockquote.bq5 { background-color: #fdf; border-color: #ff2bff; }
body blockquote blockquote blockquote blockquote blockquote blockquote, blockquote.bq6 { background-color: #CCC; border-color: #737373; }