cleanup (#15)

package.json

@@ -25,7 +25,6 @@
   "license": "MIT",
   "dependencies": {
     "acorn": "^6.1.1",
-    "copy-webpack-plugin": "^5.0.3",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
@@ -40,13 +39,14 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@leadhome/eslint-config": "^1.0.4",
+    "@leadhome/eslint-config": "^1.2.1",
     "@svgr/webpack": "^4.2.0",
     "ajv": "^6.10.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
+    "copy-webpack-plugin": "^5.0.3",
     "dotenv": "^8.0.0",
     "file-loader": "^4.0.0",
     "html-webpack-plugin": "^3.2.0",

src/components/nav-example/styled.js → src/components/nav/styled.js

@@ -1,19 +1,19 @@
 import styled from 'styled-components';
 import Link from 'react-router-dom/Link';
-import { colors, pxtorem } from 'styles/index-example';
+import { colors } from 'styles/index';
 
 // svg
 import { ReactComponent as RocketSVG } from './rocket.svg';
 
-export const StyledNav = styled.div`
-  height: ${pxtorem(70)};
-  border-bottom: ${pxtorem(4)} ${colors.coral} solid;
+export const StyledNav = styled.nav`
+  height: 70px;
+  border-bottom: 4px ${colors.coral} solid;
   background-color: ${colors.storm};
   padding: 0 1rem;
   display: flex;
   align-items: center;
   color: ${colors.white};
-  font-size: ${pxtorem(20)};
+  font-size: 20px;
 `;
 
 export const StyledLink = styled(Link)`

src/containers/app/index.js

@@ -2,15 +2,15 @@ import React, { Fragment } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import Switch from 'react-router-dom/Switch';
 import Route from 'react-router-dom/Route';
-import { breakpoints, pxtorem } from 'styles/index-example';
+import { breakpoints } from 'styles/index';
 
 // containers
-import Home from 'containers/home-example';
-import NotFound from 'containers/not-found-example';
+import Home from 'containers/home';
+import NotFound from 'containers/not-found';
 import Health from 'containers/health';
 
 // components
-import Nav from 'components/nav-example';
+import Nav from 'components/nav';
 
 const GlobalStyle = createGlobalStyle`
   * {
@@ -27,11 +27,12 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 const Container = styled.div`
-  max-width: ${pxtorem(breakpoints.large)};
+  max-width: ${breakpoints.large}px;
+  padding: 0 1rem;
   margin: 0 auto;
 
-  @media (max-width: ${pxtorem(breakpoints.large)}) {
-    padding: 0 1rem;
+  @media (min-width: ${breakpoints.large}px) {
+    padding: 0;
   }
 `;
 

src/containers/home-example/style.js → src/containers/home/style.js

@@ -1,12 +1,9 @@
 import styled from 'styled-components';
 import Link from 'react-router-dom/Link';
-import { colors, pxtorem } from 'styles/index-example';
+import { colors } from 'styles/index';
 
 export const StyledLink = styled(Link)`
   display: block;
-  margin-bottom: ${pxtorem(10)};
+  margin-bottom: 10px;
   color: ${colors.coral};
-  :visited {
-    color: ${colors.coral};
-  }
 `;

src/styles/index-example.js → src/styles/index.js

@@ -1,6 +1,6 @@
 export const breakpoints = {
   xs: 320,
-  small: 767,
+  small: 768,
   medium: 1024,
   large: 1280
 };
@@ -12,5 +12,3 @@ export const colors = {
   storm: '#51516F',
   gallery: '#EEEEEE'
 };
-
-export const pxtorem = px => `${px / 16}rem`;