Add postcss nesting and component overrides for resume layout md

gatsby/src/components/resume-layout.js

@@ -1,11 +1,27 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { MDXProvider } from '@mdx-js/react';
 
 import '../styles/resume.css';
 
+const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
+const MyParagraph = props => (
+  <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
+);
+
+const components = {
+  h1: MyH1,
+  p: MyParagraph,
+};
+
+
 const ResumeLayout = ({ pageContext, children }) => {
   console.log('pc', pageContext);
-  return (<div className={classnames('font-serif container mx-auto resume')}>{children}</div>);
+  return (
+    <MDXProvider components={components}>
+      <div className={classnames('font-serif container mx-auto resume')}>{children}</div>
+    </MDXProvider>
+  );
 };
 
 // TODO: can I use custom components for just this layout/page?

gatsby/src/styles/resume.css

@@ -1,7 +1,6 @@
 .resume {
-  background: green;
-}
-.resume h1 {
-  @apply text-3xl font-bold;
+  h1 {
+    @apply text-3xl font-bold;
+  }
 }