From 40012b869ccb1f69609723982d78adde25cf76f4 Mon Sep 17 00:00:00 2001
From: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Date: Wed, 29 May 2019 09:29:37 -0500
Subject: [PATCH] fix: Adjust header margins and list styles

closes #119
---
 .../gatsby-theme-carbon/src/components/markdown/H4.js     | 6 +++---
 .../gatsby-theme-carbon/src/components/markdown/H5.js     | 6 +++---
 .../gatsby-theme-carbon/src/components/markdown/H6.js     | 6 +++---
 .../gatsby-theme-carbon/src/components/markdown/Ol.js     | 8 ++------
 .../gatsby-theme-carbon/src/components/markdown/Ul.js     | 8 ++------
 5 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/H4.js b/packages/gatsby-theme-carbon/src/components/markdown/H4.js
index ad8a8db64..c35c4f56c 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/H4.js
+++ b/packages/gatsby-theme-carbon/src/components/markdown/H4.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import responsiveStyles from '../shared/responsiveStyles';
 
-const h4Css = ({ typeStyles, layout }) => [
+const h4Css = ({ typeStyles, spacing }) => [
   typeStyles.heading02,
   responsiveStyles,
   {
-    marginTop: layout[0],
-    marginBottom: `calc(0.5 * ${layout[0]})`,
+    marginTop: spacing[4],
+    lineHeight: 1.5,
   },
 ];
 
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/H5.js b/packages/gatsby-theme-carbon/src/components/markdown/H5.js
index ad1f11282..826fdc40c 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/H5.js
+++ b/packages/gatsby-theme-carbon/src/components/markdown/H5.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import responsiveStyles from '../shared/responsiveStyles';
 
-const h5Css = ({ typeStyles, layout }) => [
+const h5Css = ({ typeStyles, spacing }) => [
   typeStyles.heading01,
   responsiveStyles,
   {
-    marginTop: layout[0],
-    marginBottom: `calc(0.5 * ${layout[0]})`,
+    marginTop: spacing[4],
+    lineHeight: 1.5,
   },
 ];
 
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/H6.js b/packages/gatsby-theme-carbon/src/components/markdown/H6.js
index bc320f92b..450b6d78a 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/H6.js
+++ b/packages/gatsby-theme-carbon/src/components/markdown/H6.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import responsiveStyles from '../shared/responsiveStyles';
 
-const h5Css = ({ typeStyles, layout }) => [
+const h5Css = ({ typeStyles, spacing }) => [
   typeStyles.heading01,
   responsiveStyles,
   {
-    marginTop: layout[0],
-    marginBottom: `calc(0.5 * ${layout[0]})`,
+    marginTop: spacing[4],
+    lineHeight: 1.5,
   },
 ];
 
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Ol.js b/packages/gatsby-theme-carbon/src/components/markdown/Ol.js
index 9e95a6273..1612cf872 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/Ol.js
+++ b/packages/gatsby-theme-carbon/src/components/markdown/Ol.js
@@ -12,7 +12,7 @@ const List = styled.ol`
   margin-bottom: 1.5rem;
 
   li {
-    margin-left: 1rem;
+    margin-left: 1.25rem;
     counter-increment: step-counter;
     a {
       color: ${({ theme }) => theme.colors.black};
@@ -20,15 +20,11 @@ const List = styled.ol`
     & :before {
       content: counter(step-counter) '. ';
       position: absolute;
-      margin-left: -0.5rem;
-      transform: translate(-100%, 0px);
+      margin-left: -1.25rem;
     }
     & p {
       display: inline;
     }
-    ${mq.md} {
-      margin-left: 2rem;
-    }
   }
 `;
 
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Ul.js b/packages/gatsby-theme-carbon/src/components/markdown/Ul.js
index 2b3b32865..1d01cabb1 100644
--- a/packages/gatsby-theme-carbon/src/components/markdown/Ul.js
+++ b/packages/gatsby-theme-carbon/src/components/markdown/Ul.js
@@ -11,22 +11,18 @@ const List = styled.ul`
   margin-bottom: 1.5rem;
 
   li {
-    margin-left: 1rem;
+    margin-left: 1.25rem;
     a {
       color: ${props => props.theme.colors.white};
     }
     & :before {
       content: '–';
       position: absolute;
-      margin-left: -0.5rem;
-      transform: translate(-100%, 0px);
+      margin-left: -1.25rem;
     }
     & p {
       display: inline;
     }
-    ${mq.md} {
-      margin-left: 2rem;
-    }
   }
 `;