add styling for blockquotes (#965)

This is a bite-sized PR that fixes #681. It adds a very minimal styling set to `blockquote` that can be easily overridden by a user.

The [markdown kitchen sink](https://deploy-preview-965--just-the-docs.netlify.app/docs/index-test/) has the example described in the issue:

<img width="772" alt="Screen Shot 2022-09-15 at 5 49 44 PM" src="https://user-images.githubusercontent.com/14893287/190533247-60ddaba3-85b2-4c03-b520-a67f6b047345.png">


Note that it differs from GFM/GitHub's renderer:

> This is a blockquote!

I'm not sure if the intention is to bring it to one-to-one parity. If that's the case, I can dim the text color and make the sidebar thicker.
This commit is contained in:
Matt Wang 2022-09-16 11:32:34 -07:00 committed by GitHub
parent 8a6d26ac53
commit 9107f2e81e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -107,3 +107,14 @@ hr {
background-color: $border-color;
border: 0;
}
// adds a GitHub-style sidebar to blockquotes
blockquote {
margin: 10px 0;
// resets user-agent stylesheets for blockquotes
margin-block-start: 0;
margin-inline-start: 0;
padding-left: 15px;
border-left: 3px solid $border-color;
}