diff --git a/package.json b/package.json index 42896346d..3c3dde59e 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,8 @@ "main": "index.js", "scripts": { "clean": "rimraf dist", - "build:webpack": - "NODE_ENV=production webpack --config webpack.config.prod.js", - "build:analyze": - "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer", + "build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js", + "build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer", "build": "npm run clean && npm run build:webpack", "start": "NODE_ENV=production node index.js", "dev": "NODE_ENV=development nodemon --watch server index.js", @@ -20,23 +18,35 @@ "sequelize:migrate": "sequelize db:migrate", "test": "npm run test:app && npm run test:server", "test:app": "jest", - "test:server": - "jest --config=server/.jestconfig.json --runInBand --forceExit", + "test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit", "precommit": "lint-staged" }, "lint-staged": { - "*.js": ["eslint --fix", "git add"] + "*.js": [ + "eslint --fix", + "git add" + ] }, "jest": { "verbose": false, - "roots": ["app"], + "roots": [ + "app" + ], "moduleNameMapper": { "^.*[.](s?css|css)$": "/__mocks__/styleMock.js", "^.*[.](gif|ttf|eot|svg)$": "/__test__/fileMock.js" }, - "moduleFileExtensions": ["js", "jsx", "json"], - "moduleDirectories": ["node_modules"], - "modulePaths": ["app"], + "moduleFileExtensions": [ + "js", + "jsx", + "json" + ], + "moduleDirectories": [ + "node_modules" + ], + "modulePaths": [ + "app" + ], "setupFiles": [ "raf/polyfill", "/setupJest.js", @@ -160,6 +170,7 @@ "string-hash": "^1.1.0", "style-loader": "^0.18.2", "styled-components": "^2.2.3", + "styled-components-breakpoint": "^1.0.1", "styled-components-grid": "^1.0.0-preview.15", "styled-normalize": "^2.2.1", "url-loader": "0.5.7", diff --git a/server/pages/Home.js b/server/pages/Home.js index b2e62d7ab..67f49d1f9 100644 --- a/server/pages/Home.js +++ b/server/pages/Home.js @@ -1,7 +1,9 @@ // @flow import React from 'react'; +import { Helmet } from 'react-helmet'; import styled from 'styled-components'; import Grid from 'styled-components-grid'; +import breakpoint from 'styled-components-breakpoint'; import Hero from './components/Hero'; import SignupButton from './components/SignupButton'; import { developers, githubUrl } from '../utils/routeHelpers'; @@ -10,6 +12,9 @@ import { color } from '../../shared/styles/constants'; function Home() { return ( + + Outline - Team wiki & documentation +

Your team’s knowledge base

@@ -21,7 +26,7 @@ function Home() {

- +

Blazing Fast Wiki

@@ -96,10 +101,14 @@ function Home() { } const Screenshot = styled.img` - width: 150%; + width: 100%; box-shadow: 0 0 80px 0 rgba(124, 124, 124, 0.5), 0 0 10px 0 rgba(237, 237, 237, 0.5); border-radius: 5px; + + ${breakpoint('desktop')` + width: 150%; + `}; `; const Highlights = styled(Grid)` @@ -111,6 +120,10 @@ const Highlights = styled(Grid)` const Features = styled(Grid)` padding: 0 2em; overflow: hidden; + + ${breakpoint('mobile')` + flex-direction + `}; `; const Feature = styled(Grid.Unit)` @@ -132,7 +145,7 @@ const Feature = styled(Grid.Unit)` const Footer = styled.div` text-align: center; width: 100%; - padding: 6em; + padding: 6em 5em; `; const FooterCTA = styled.p` diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js index d6371c995..02c40de7a 100644 --- a/server/pages/components/Layout.js +++ b/server/pages/components/Layout.js @@ -21,7 +21,10 @@ export default function Layout({ children }: Props) { - + diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index 3610c638c..69e7f010a 100644 --- a/server/pages/components/Navigation.js +++ b/server/pages/components/Navigation.js @@ -1,6 +1,7 @@ // @flow import React from 'react'; import styled from 'styled-components'; +import breakpoint from 'styled-components-breakpoint'; import { signin, developers, @@ -16,12 +17,12 @@ function TopNavigation() {