fix: update various markdown widths

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>

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

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;
-}

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%;
   }
 }
 

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