fix: paragraph width / math

packages/example/src/pages/components/Aside.mdx

@@ -6,14 +6,14 @@ title: Aside
 
 The `<Aside>` component is a wrapper component that adds styling to make the text display smaller than the default body text; using `body-long-01` and adds the correct top border styles.
 
-It should only be used within a `<Column>` component with specific parameters. `<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>`
+It should only be used within a `<Column>` component with specific parameters. `<Column colMd={2} colLg={3} offsetMd={1}>`
 
 </PageDescription>
 
 ## Example
 
 <Row>
-<Column colMd={5} colLg={7}>
+<Column colMd={5} colLg={8}>
 
 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.
 
@@ -24,7 +24,7 @@ It is more important than ever that we own our own ethos, make palpable our bran
 Aesthetic is defined as the philosophical theory or set of principles governing outward appearance or actions.
 
 </Column>
-<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>
+<Column colMd={3} colLg={3}>
 <Aside>
 
 **Good design is always good design.**
@@ -39,11 +39,9 @@ What we borrow from our own design history is not a mid-century aesthetic in sty
 ## Code
 
 ```jsx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Aside
-<Column colMd={2} colLg={3} offsetMd={1} noGutterSm>
+<Column colMd={2} colLg={3} offsetMd={1}>
   <Aside>
-    **Good design is always good design.**
-
-    What we borrow from our own design
+    **Good design is always good design.** What we borrow from our own design
     history is not a mid-century aesthetic in stylistic terms, but the modernist
     attitudes and approach used at the time.
   </Aside>

packages/example/src/pages/demo/index.mdx

@@ -16,7 +16,33 @@ This page is meant to demonstrate some of the components in action. You can chec
 </AnchorLinks>
 
 <Row>
-<Column colMd={5} colLg={7}>
+<Column colMd={4} colLg={4}>
+
+![Grid Example](../components/images/Article_05.png)
+
+</Column>
+<Column colMd={4} colLg={4}>
+
+![Grid Example](../components/images/Article_05.png)
+
+</Column>
+<Column colMd={4} colLg={4}>
+
+![Grid Example](../components/images/Article_05.png)
+
+</Column>
+</Row>
+
+<PageDescription>
+
+Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
+
+</PageDescription>
+
+Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
+
+<Row>
+<Column colMd={5} colLg={8}>
 
 Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.
 
@@ -26,7 +52,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
 IBMers believe in progress—that application of intelligence, reason and science can improve business, society and the human condition.
 
 </Column>
-<Column colMd={2} colLg={3} offsetLg={1} offsetMd={1} noGutterSm>
+<Column colMd={2} colLg={3} offsetMd={1}>
 <Aside>
 
 <p><strong>Good design is always<br />good design.</strong></p>
@@ -66,7 +92,7 @@ Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pin
 
 ## Images
 
-![Large blocky illustration](../images/large-image.png)
+![Large blocky illustration](../../images/large-image.png)
 
 ## Videos
 

packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss

@@ -3,7 +3,10 @@
   position: relative;
   padding-top: $spacing-04;
   top: -$spacing-04;
-  padding-right: 26%; //spacing values came from IDL site design
+
+  @include carbon--breakpoint('lg') {
+    padding-right: 26%; //spacing values came from IDL site design
+  }
 }
 
 .aside:before {

packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss

@@ -1,18 +1,20 @@
 //---------------------------------------
 // P
 //---------------------------------------
+.paragraph-row {
+  margin-bottom: $spacing-06;
+}
+
 .paragraph {
   @include carbon--type-style('body-long-02');
-  margin-bottom: $spacing-06;
 
   @include carbon--breakpoint('md') {
-    padding-right: $spacing-07;
+    padding-right: $spacing-05;
   }
 }
 
 // Responsive by default
 .paragraph--responsive {
-  margin-left: -$spacing-05;
   padding-left: $spacing-05;
 
   // 8 col
@@ -21,12 +23,13 @@
   }
 }
 
-// If paragraph is inside a user specified row then allow the grid code to set the width
-:global(.#{$prefix}--row) .paragraph {
+// If paragraph is inside a user specified row then allow the grid code to set the width and padding
+:global(.#{$prefix}--row .#{$prefix}--row) .paragraph {
   width: 100%;
+  padding-left: 0;
 
   @include carbon--breakpoint('md') {
-    padding-right: $spacing-07;
+    padding-right: 0;
   }
 }
 
@@ -113,8 +116,6 @@
 
 // If quote is inside a user specified row then allow the grid code to set the width
 :global(.#{$prefix}--row) .blockquote .paragraph {
-  padding-right: 0;
-
   @include carbon--breakpoint('md') {
     width: 100%;
   }

packages/gatsby-theme-carbon/src/components/markdown/P.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Row } from '../Grid';
 
-import { paragraph, paragraphResponsive } from './Markdown.module.scss';
+import {
+  paragraph,
+  paragraphResponsive,
+  paragraphRow,
+} from './Markdown.module.scss';
 
 export default class P extends React.Component {
   static propTypes = {
@@ -28,9 +33,11 @@ export default class P extends React.Component {
     });
 
     return (
-      <p className={paragraphClasses} {...rest}>
-        {children}
-      </p>
+      <Row className={paragraphRow}>
+        <p className={paragraphClasses} {...rest}>
+          {children}
+        </p>
+      </Row>
     );
   }
 }