From 9107f2e81e53c62dbc9ee19830885dde393f72b8 Mon Sep 17 00:00:00 2001
From: Matt Wang <matt@matthewwang.me>
Date: Fri, 16 Sep 2022 11:32:34 -0700
Subject: [PATCH] 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.
---
_sass/base.scss | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/_sass/base.scss b/_sass/base.scss
index da83fe09..f72d0ddd 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -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;
+}
--
GitLab