ember-learn / ember-learn/guides-source
Blockquotes lack styling, existing blockquote usage is incorrect
- 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:**
>
>
> 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:
>
![]()
>
> 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
Assessment
This issue has not been assessed yet.