Improved mobile styles and keyword targeting

2017-11-26 16:52:25 -08:00
parent ba3756eb74
commit 210588d9a6
5 changed files with 115 additions and 54 deletions
--- 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)$": "<rootDir>/__mocks__/styleMock.js",
      "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
    },
-    "moduleFileExtensions": ["js", "jsx", "json"],
-    "moduleDirectories": ["node_modules"],
-    "modulePaths": ["app"],
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "json"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "modulePaths": [
+      "app"
+    ],
    "setupFiles": [
      "raf/polyfill",
      "<rootDir>/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",
--- 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 (
    <span>
+      <Helmet>
+        <title>Outline - Team wiki & documentation</title>
+      </Helmet>
      <Grid>
        <Hero>
          <h1>Your team’s knowledge base</h1>
@ -21,7 +26,7 @@ function Home() {
            <SignupButton />
          </p>
        </Hero>
-        <Features>
+        <Features reverse={{ mobile: true, tablet: false, desktop: false }}>
          <Grid.Unit size={{ desktop: 1 / 3, tablet: 1 / 2 }}>
            <Feature>
              <h2>Blazing Fast Wiki</h2>
@ -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`
--- a/server/pages/components/Layout.js
+++ b/server/pages/components/Layout.js
@ -21,7 +21,10 @@ export default function Layout({ children }: Props) {
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="referrer" content="origin" />
-          <meta name="description" content="Your team’s knowledge base" />
+          <meta
+            name="description"
+            content="Your team’s knowledge base - Team wiki, documentation, playbooks, onboarding & more…"
+          />
          <meta name="og:site_name" content="Outline" />
          <meta name="og:type" content="website" />
          <meta name="theme-color" content={color.primary} />
--- 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() {
    <Nav>
      <Brand href="/">Outline</Brand>
      <Menu>
-        <MenuItem>
+        <MenuItemDesktop>
          <a href="/#features">Features</a>
-        </MenuItem>
-        <MenuItem>
+        </MenuItemDesktop>
+        <MenuItemDesktop>
          <a href={blogUrl()}>Blog</a>
-        </MenuItem>
+        </MenuItemDesktop>
        <MenuItem>
          <a href={developers()}>API</a>
        </MenuItem>
@ -36,44 +37,23 @@ function TopNavigation() {
 function BottomNavigation() {
  return (
    <BottomNav>
-      <Menu>
-        <MenuItem>
-          <a href={githubUrl()}>GitHub</a>
-        </MenuItem>
-        <MenuItem>
-          <a href={spectrumUrl()}>Spectrum</a>
-        </MenuItem>
-        <MenuItem>
-          <a href={blogUrl()}>Medium</a>
-        </MenuItem>
-        <MenuItem>
-          <a href={twitterUrl()}>Twitter</a>
-        </MenuItem>
-      </Menu>
+      <div>
+        <a href={githubUrl()}>GitHub</a>
+      </div>
+      <div>
+        <a href={spectrumUrl()}>Spectrum</a>
+      </div>
+      <div>
+        <a href={blogUrl()}>Medium</a>
+      </div>
+      <div>
+        <a href={twitterUrl()}>Twitter</a>
+      </div>
    </BottomNav>
  );
 }

-const Nav = styled.nav`
-  display: flex;
-  padding: 20px 30px;
-  justify-content: space-between;
-`;
-
-const BottomNav = styled(Nav)`
-  margin-bottom: 30px;
-  justify-content: center;
-`;
-
-const Menu = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-
-const MenuItem = styled.li`
-  display: inline-block;
-  margin: 0 0 0 40px;
+const MenuLinkStyle = `
  font-size: 15px;
  font-weight: 500;

@ -85,10 +65,64 @@ const MenuItem = styled.li`
    color: ${color.slateDark};
    text-decoration: underline;
  }
+`;
+
+const Menu = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+const MenuItem = styled.li`
+  display: inline-block;
+  margin: 0 0 0 40px;

  &:first-child {
    margin-left: 0;
  }
+
+  ${MenuLinkStyle};
+`;
+
+const MenuItemDesktop = styled(MenuItem)`
+  display: none;
+
+  ${breakpoint('tablet')`
+    display: inline-block;
+  `};
+`;
+
+const Nav = styled.nav`
+  display: flex;
+  padding: 20px 30px;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const BottomNav = styled.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 40px;
+
+  > div {
+    display: flex;
+    margin: 0 0 40px 0;
+    ${MenuLinkStyle};
+  }
+
+  ${breakpoint('tablet')`
+    flex-direction: row;
+
+    > div {
+      margin: 0 0 0 40px;
+
+      &:first-child {
+        margin: 0;
+      }
+    }
+  `};
 `;

 const Brand = styled.a`
--- a/yarn.lock
+++ b/yarn.lock
@ -8436,7 +8436,7 @@ style-loader@^0.18.2:

 styled-components-breakpoint@^1.0.1:
  version "1.0.1"
-  resolved "https://registry.npmjs.org/styled-components-breakpoint/-/styled-components-breakpoint-1.0.1.tgz#51fb474d9449e228b6f3f2cd232631ec65c149bc"
+  resolved "https://registry.yarnpkg.com/styled-components-breakpoint/-/styled-components-breakpoint-1.0.1.tgz#51fb474d9449e228b6f3f2cd232631ec65c149bc"

 styled-components-grid@^1.0.0-preview.15:
  version "1.0.0-preview.15"