Skip to content

Commit

Permalink
remove emotion for styled components
Browse files Browse the repository at this point in the history
  • Loading branch information
imnotjames committed Oct 15, 2023

Verified

This commit was signed with the committer’s verified signature.
imnotjames James Ward
1 parent 72e5126 commit 6ade1ba
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 229 deletions.
1 change: 0 additions & 1 deletion gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ module.exports = {
},
},
'gatsby-plugin-styled-components',
`gatsby-plugin-emotion`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
Expand Down
191 changes: 0 additions & 191 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,8 @@
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"babel-plugin-styled-components": "^2.1.4",
"gatsby": "^5.12.1",
"gatsby-plugin-emotion": "^8.12.0",
"gatsby-plugin-image": "^3.12.0",
"gatsby-plugin-manifest": "^5.12.0",
"gatsby-plugin-react-helmet": "^6.12.0",
Expand Down
63 changes: 29 additions & 34 deletions src/components/layout.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from "react"
import { Link } from "gatsby"
import styled from 'styled-components';
import { css } from '@emotion/react'
import { Helmet } from 'react-helmet'

import { rhythm } from "../utils/typography"
Expand Down Expand Up @@ -30,20 +29,34 @@ a {
}
`;

const LayoutHeaderContainer = styled.header`
position: relative;
margin-top: -42px;
@media print {
display: none;
}
`;

const LayoutContainer = styled.div`
margin-left: auto;
margin-right: auto;
max-width: ${rhythm(30)};
padding: ${rhythm(1.5)} ${rhythm(3 / 4)};
@page {
margin: 0 0;
}
@media print {
max-width: max-content;
padding: 8mm 10mm !important;
margin: 0 !important;
}
`;

function LayoutHeader() {
return (
<header
style={{
position: "relative",
marginTop: "-42px",
}}
css={css`
@media print {
display: none;
}
`
}
>
<LayoutHeaderContainer>
<h1
className="title"
style={{
Expand Down Expand Up @@ -121,31 +134,13 @@ function LayoutHeader() {
</NavigationItem>
</ul>
</nav>
</header>
</LayoutHeaderContainer>
)
}

function Layout ({ location, title, children }) {
return (
<div
style={{
marginLeft: `auto`,
marginRight: `auto`,
maxWidth: rhythm(30),
padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
}}
css={css`
@page {
margin: 0 0;
}
@media print {
max-width: auto;
padding: 8mm 10mm !important;
margin: 0 !important;
}
`
}
>
<LayoutContainer>
<Helmet defer={false}>
<meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
</Helmet>
Expand All @@ -154,7 +149,7 @@ function Layout ({ location, title, children }) {
title={title}
/>
<main>{children}</main>
</div>
</LayoutContainer>
);
}

Expand Down

0 comments on commit 6ade1ba

Please sign in to comment.