chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add postcss nesting and component overrides for resume layout md

Browse Source
This commit is contained in:
Chuck Dries 2021-06-14 18:21:56 -07:00
parent 077a4149c9
commit 925d095eeb
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
5 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby/package.json
View File

@ -34,6 +34,7 @@
"gatsby-transformer-sharp": "^3.6.0",
"node-iptc": "^1.0.5",
"postcss": "^8.3.4",
"postcss-nested": "^5.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",

3
gatsby/postcss.config.js
View File

@ -1,6 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
'postcss-nested': {},
autoprefixer: {},
},
}
};

18
gatsby/src/components/resume-layout.js
View File

@ -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?

7
gatsby/src/styles/resume.css
View File

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

2
gatsby/yarn.lock
View File

@ -10541,7 +10541,7 @@ postcss-modules-values@^4.0.0:
dependencies:
icss-utils "^5.0.0"
postcss-nested@5.0.5:
postcss-nested@5.0.5, postcss-nested@^5.0.5:
version "5.0.5"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603"
integrity sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==