ember-learn / ember-learn/guides-source

Blockquotes lack styling, existing blockquote usage is incorrect

Open
#1,468 3 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
HTML
Stars
161
Forks
512
Avg merge
4d 9h
Merged PRs (30d)
4

Description

# Problem Summary

1. Blockquotes are unstyled in the guide
2. Many guides currently utilize blockquotes in a semantically incorrect way

**Example _screenshot_ where the second paragraph is a blockquote:**

> Screen Shot 2020-07-01 at 10 20 45 AM
>
> As seen in the Testing Components guide

# Details

In markdown the `> ` indicates a `blockquote` html element.

```markdown
> Hello, I am a blockquote!
> Gaiety
```

> The HTML `

` Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation... a text representation of the source can be given using the `` element.
> [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)

Therefore, we can conclude that we should be using `> ` in guides specifically when a quote is being used along with a reference to the source. Any place that uses `> ` that isn't a quote is incorrect and should be changed.

# Proposed Solution

## 1. Styling the Blockquote

We decide on a blockquote styling. Here's my proposed styling that uses colors and styles pulled from other elements within the guides:

```css
.chapter blockquote {
font-family: serif;
font-size: 85%;
color: #4d4d4d;
padding: 0.5em 0.75em;
border: 1px solid #F8E7CF;
border-radius: 2px;
}
.chapter blockquote :first-child {
margin-top: 0;
}
.chapter blockquote :last-child {
margin-bottom: 0;
}
```

Preview:

> Screen Shot 2020-07-01 at 12 08 18 PM
>
> As pulled from #1467

## 2. Changing existing blockquote instances

We go through existing guides (perhaps just in `guides/release`, although it'll be up to the learning team how far back we go) to address each instance of a blockquote to remove them, leave them, or change them to something else in markdown.

> ```bash
> git grep -n "^> "
> ```
> @ijlee2

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.