Blockquotes lack styling, existing blockquote usage is incorrect

[hergaiety]

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.

> Hello, I am a blockquote!
> <cite>Gaiety</cite>

The HTML <blockquote> 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 <cite> element. MDN web docs

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:

.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.

git grep -n "^> "

@ijlee2

[MelSumner]

I don't think I realized we were doing this, thanks for catching it. We'll need to move this over to the ember-styleguide repository I think though (+ @mansona )

[mansona]

@MelSumner yes we have identified this as part of the Redesign project and we have a solution that works for the new redesign.

I would worry about trying to implement this in the old design 🤔 It is probably best to wait for the work of the Website Redesign Strike Team to move onto the Guides project and get this implementation for "free". We are currently wrapping up the Blog project so I don't think we would need to wait for that long 👍

[MelSumner]

@mansona I agree but we should still move this issue and add it to that project for tracking, yes?