Adding blockquotes

What are blockquotes?

blockquotes are used to indicate text that's quoted from a different source. This is often rendered visually by indentation.

How to add blockquotes

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: