-
Notifications
You must be signed in to change notification settings - Fork 3
Adding blockquotes
blockquotes are used to indicate text that's quoted from a different source. This is often rendered visually by indentation.
Inserting a blockquote in a .qmd
file is done so using the >
character ahead of whatever text you'd like included in that blockquote. Normally, that would look something like this:
> Here is some quoted text
which would render like this:

The Openscapes website stylesheet, styles.scss
contains some CSS rules for styling blockquotes.
Let's first look at the following element selector:
blockquote {
background: $white;
border-left: 3px solid $white;//$blue;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
This changes the default blockquote appearance. A blockquote written like this:
> Here is some quoted text
will render like this:

This change to the default blockquote appearance was done in order to create the speech bubble blockquotes on the website landing page (along with some other CSS styling):

An additional CSS class selector, .blockquote-blue
is included in styles.scss
for creating more traditional blockquotes, which are indented following a vertical blue bar. The selector is written like this:
.blockquote-blue {
background: $white;
border-left: 3px solid $blue;
}
To apply it, use the following syntax in a .qmd
file:
::: {.blockquote-blue}
> Here is some quoted text
:::
which will render like this:

Most quotes on the Openscapes website that are styled using .blockquote-blue
are wrapped in quotes, ""
, italicized, and with a bolded attribution (if one exists). For example:
::: {.blockquote-blue}
> *"Here is some quoted text"* **---Sam Csik**
:::
which renders like this:
