Improved mobile styles and keyword targeting

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`