diff --git a/package.json b/package.json index 8c00638f0a..825356977e 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,15 @@ "author": "Adam Miller ", "private": true, "dependencies": { + "@emotion/core": "^10.0.7", "@types/react-helmet": "^5.0.7", "dotenv": "^6.0.0", - "emotion": "^9.2.12", - "emotion-server": "^9.2.12", + "emotion": "^10.0.7", + "emotion-server": "^10.0.7", "gatsby": "^2.0.0", "gatsby-plugin-canonical-urls": "^2.0.10", "gatsby-plugin-catch-links": "^2.0.9", - "gatsby-plugin-emotion": "^2.0.5", + "gatsby-plugin-emotion": "^4.0.4", "gatsby-plugin-manifest": "^2.0.2", "gatsby-plugin-offline": "^2.0.5", "gatsby-plugin-react-helmet": "^3.0.0", @@ -27,7 +28,7 @@ "prismjs": "^1.15.0", "react": "^16.8.0", "react-dom": "^16.8.0", - "react-emotion": "^9.2.12", + "react-emotion": "^10.0.0", "react-helmet": "^5.2.0", "tslint": "^5.11.0", "typescript": "^3.1.1" diff --git a/src/components/header.tsx b/src/components/header.tsx index cff00bde88..73625643b8 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,22 +1,22 @@ import { Link } from 'gatsby'; import React from 'react'; -import { css } from 'emotion'; +import { css, SerializedStyles } from '@emotion/core'; import logo from '../images/logo.svg'; +const ulStyles: SerializedStyles = css` + @media (max-width: 380px) { + padding: 0; + } + margin: 0 auto; + padding: 0 4.8rem; + display: flex; + align-items: center; + list-style: none; +`; + const Header = () => (