From bffd2905b9f6a500ec0c6a6c6afb934dd03ec748 Mon Sep 17 00:00:00 2001
From: Bass Jobsen <bass@w3masters.nl>
Date: Tue, 3 Nov 2015 10:17:21 +0100
Subject: [PATCH 1/3]  refactor blockqoutes to to avoid tag selectors & child
 selectors css v4

---
 scss/_type.scss | 47 ++++++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/scss/_type.scss b/scss/_type.scss
index 1d55ccb2d7..2b0a2567c7 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -133,27 +133,27 @@ mark,
   margin-bottom: $spacer;
   font-size: $blockquote-font-size;
   border-left: .25rem solid $blockquote-border-color;
+}
 
-  p,
-  ul,
-  ol {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  footer {
-    display: block;
-    font-size: 80%; // back to default font-size
-    line-height: $line-height;
-    color: $blockquote-small-color;
-
-    &::before {
-      content: "\2014 \00A0"; // em dash, nbsp
-    }
+.blockquote-text,
+.blockquote-list // ul, ol
+ {
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
+.blockquote-footer {
+  display: block;
+  font-size: 80%; // back to default font-size
+  line-height: $line-height;
+  color: $blockquote-small-color;
+
+  &::before {
+    content: "\2014 \00A0"; // em dash, nbsp
+  }
+ }
+
 // Opposite alignment of blockquote
 .blockquote-reverse {
   padding-right: $spacer;
@@ -161,13 +161,14 @@ mark,
   text-align: right;
   border-right: .25rem solid $blockquote-border-color;
   border-left: 0;
+}
 
-  // Account for citation
-  footer {
-    &::before { content: ""; }
-    &::after {
-      content: "\00A0 \2014"; // nbsp, em dash
-    }
+.blockquote-reverse .blockquote-footer {
+  &::before {
+    content: "";
+  }
+  &::after {
+    content: "\00A0 \2014"; // nbsp, em dash
   }
 }
 

From f1c7c3f599117965371e417ef930ef1ec5f2c7ce Mon Sep 17 00:00:00 2001
From: Bass Jobsen <bass@w3masters.nl>
Date: Tue, 3 Nov 2015 10:25:17 +0100
Subject: [PATCH 2/3] Update typography.md

---
 docs/content/typography.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/content/typography.md b/docs/content/typography.md
index bc2a85c63e..8e86c91021 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -147,22 +147,22 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
 
 ## Blockquotes
 
-For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`.
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p class="blockquote-text">` or list `<ul class="blockquote-list">` , `<ol class="blockquote-list">`.
 
 {% example html %}
-<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+<blockquote class="blockquote">
+  <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
 {% endexample %}
 
 ### Naming a source
 
-Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
+Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
 
 {% example html %}
 <blockquote class="blockquote">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
 
@@ -172,8 +172,8 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
 
 {% example html %}
 <blockquote class="blockquote blockquote-reverse">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
 

From 0fdfde7709aecda1b75aa34e6a7e504e041cbf8a Mon Sep 17 00:00:00 2001
From: Bass Jobsen <bass@w3masters.nl>
Date: Tue, 3 Nov 2015 10:52:18 +0100
Subject: [PATCH 3/3] Update _type.scss

---
 scss/_type.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_type.scss b/scss/_type.scss
index 2b0a2567c7..f6fcd07b21 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -152,7 +152,7 @@ mark,
   &::before {
     content: "\2014 \00A0"; // em dash, nbsp
   }
- }
+}
 
 // Opposite alignment of blockquote
 .blockquote-reverse {