Homepage skeleton

This commit is contained in:
Tom Moor
2017-10-26 23:02:45 -07:00
parent fc45d6a180
commit e370676b49
4 changed files with 89 additions and 26 deletions

View File

@ -5,16 +5,36 @@ import { color } from '../../../shared/styles/constants';
function Navigation() {
return (
<nav>
<Nav>
<Brand href="/">Atlas</Brand>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/pricing">Pricing</a></li>
</ul>
</nav>
<Menu>
<MenuItem><a href="/about">About</a></MenuItem>
<MenuItem><a href="/pricing">Pricing</a></MenuItem>
<MenuItem><a href="/auth/slack">Sign In</a></MenuItem>
</Menu>
</Nav>
);
}
const Nav = styled.nav`
display: flex;
padding: 20px;
justify-content: space-between;
`;
const Menu = styled.ul`
margin: 0;
padding: 0;
list-style: none;
`;
const MenuItem = styled.li`
display: inline-block;
margin: 0 0 0 40px;
font-size: 15px;
font-weight: 500;
`;
const Brand = styled.a`
font-weight: 600;
font-size: 20px;