From 8badb6bb1a5c2736e768a84d67f5e497ce6dd213 Mon Sep 17 00:00:00 2001
From: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Date: Wed, 19 Jun 2019 20:10:59 -0500
Subject: [PATCH 1/2] fix: update various markdown widths

closes #182, closes #172

Also adds styles for blockquote citations and uses more real
life block quote examples to the documentation for context.
---
 .../example/src/pages/components/Aside.mdx    |  8 +++++-
 .../example/src/pages/components/markdown.mdx | 14 ++++++++--
 .../PageDescription.module.scss               |  7 +++--
 .../components/markdown/Markdown.module.scss  | 28 +++++++++++++++----
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/packages/example/src/pages/components/Aside.mdx b/packages/example/src/pages/components/Aside.mdx
index 1ee4b1619..9d2242a40 100644
--- a/packages/example/src/pages/components/Aside.mdx
+++ b/packages/example/src/pages/components/Aside.mdx
@@ -13,7 +13,13 @@ The `<Aside>` component is a wrapper component that adds styling to make the tex
 <Row>
 <Column colMd={5} colLg={7} className="bx--type-expressive-heading-03">
 
-![test](./images/featured.png)
+It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.
+
+> Without aesthetic, design is either the humdrum repetition of familiar clichés or a wild scramble for novelty. Without aesthetic, the computer is but a mindless speed machine, producing effects without substance, form without relevant content, or content without meaningful form.
+>
+> <cite>– Paul Rand</cite>
+
+Aesthetic is defined as the philosophical theory or set of principles governing outward appearance or actions.
 
 </Column>
 <Column colSm={0} colMd={2} colLg={3} offsetMd={1} noGutterSm>
diff --git a/packages/example/src/pages/components/markdown.mdx b/packages/example/src/pages/components/markdown.mdx
index d28ecada2..b48074513 100644
--- a/packages/example/src/pages/components/markdown.mdx
+++ b/packages/example/src/pages/components/markdown.mdx
@@ -175,14 +175,22 @@ Markdown | Less | Pretty
 1 | 2 | 3
 ```
 
-## Blockquotes
+## Blockquotes and citations
 
-> This is a Blockquote
+It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.
+
+> This is a Blockquote.
 > This line is part of the same quote.
 
+> <cite>– Allison</cite>
+
+It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.
+
 #### Code
 
 ```
-> This is a Blockquote
+> This is a Blockquote.
 > This line is part of the same quote.
+
+> <cite>– Allison</cite>
 ```
diff --git a/packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss b/packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss
index 0bf20c946..95305e3b7 100644
--- a/packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss
@@ -5,13 +5,14 @@
   @include carbon--type-style('expressive-heading-03', true);
   margin-bottom: $layout-03;
 
+  // 6 col
   @include carbon--breakpoint('md') {
-    width: calc(62.5% - 2rem);
+    width: 75%;
   }
 
-  // 8 columns wide
+  // 8 col
   @include carbon--breakpoint('lg') {
-    width: calc(66.667% - 2rem);
+    width: 66.667%;
   }
 }
 
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
index ae3dbfd0c..29862d700 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
@@ -15,14 +15,14 @@
   margin-left: -$spacing-05;
   padding-left: $spacing-05;
 
-  // 5 columns wide
+  // 6 col
   @include carbon--breakpoint('md') {
-    width: calc(63%);
+    width: 75%;
   }
 
-  // 8 columns wide
+  // 8 col
   @include carbon--breakpoint('lg') {
-    width: calc(67.3%);
+    width: 66.667%;
   }
 }
 
@@ -42,16 +42,32 @@
 
 .blockquote .paragraph {
   @include carbon--type-style('expressive-heading-03');
+  margin-bottom: 0;
+}
+
+.blockquote .paragraph--responsive {
+  // 6 col
   @include carbon--breakpoint('md') {
-    width: calc(62.5% - 3rem);
+    width: calc(75% - 3rem);
   }
 
-  // 8 columns wide
+  // 8 col
   @include carbon--breakpoint('lg') {
     width: calc(66.667% - 3rem);
   }
 }
 
+// If quote is inside a user specified row then allow the grid code to set the width
+:global(.#{$prefix}--row) .blockquote .paragraph {
+  width: calc(100% - 3rem);
+}
+
+.blockquote cite {
+  @include carbon--type-style('body-long-01');
+  display: block;
+  margin-top: $spacing-02;
+}
+
 //---------------------------------------
 // Responsive widths
 //---------------------------------------

From fc2e561a86b5886479efa5df25d9417419fd4789 Mon Sep 17 00:00:00 2001
From: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Date: Wed, 19 Jun 2019 21:09:28 -0500
Subject: [PATCH 2/2] fix: button regression closes #177

---
 .../src/components/Header/Header.module.scss        | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
index 6b81762a4..87fb164f4 100644
--- a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
@@ -1,12 +1,9 @@
 @import '~carbon-components/scss/globals/scss/vars';
 @import '~carbon-components/scss/globals/scss/layout';
 
-header.header button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.header button {
   svg {
-    margin-top: 0;
+    margin-top: $spacing-02;
   }
 }
 
@@ -20,9 +17,3 @@ header.header {
 .header.hidden {
   top: -48px;
 }
-
-button.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}