Merge pull request #28 from luhmann/GH-10-style-404

#10: give minimal styling to 404 page

src/components/Layout/index.js

@@ -45,6 +45,11 @@ export const LayoutComponent = ({ children, albums, location }) => (
  name: 'description',
  content: 'Photography by Jan Florian Dietrich from Berlin, Germany',
  },
+ {
+ name: 'viewport',
+ content:
+ 'width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1',
+ },
  ]}
  link={[
  {

src/components/Menu/index.js

@@ -6,9 +6,9 @@ import styled, { css } from 'styled-components';
 import { themeGet } from 'styled-system';
 
 import { albumInfoType } from 'utils/types';
+import { StyledLink } from 'components/';
 
 import { mediaInput, mediaScreen } from '../../theme';
-import { StyledLink } from '../';
 
 const Nav = styled.a`
  color: ${themeGet('colors.black')};

src/pages/404.js

@@ -1,10 +1,58 @@
 import React from 'react';
+import styled from 'styled-components';
+import { themeGet } from 'styled-system';
 
-const NotFoundPage = () => (
- <div>
- <h1>NOT FOUND</h1>
- <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
- </div>
+import { Layout, ContentContainer, StyledLink } from 'components/';
+import { locationType } from 'utils/types';
+
+import { mediaScreen } from '../theme';
+
+const TextContainer = styled(ContentContainer)`
+ padding: ${themeGet('space.4')};
+ padding-top: ${themeGet('space.6')};
+
+ ${mediaScreen.md`
+ padding: ${themeGet('space.3')};
+ padding-top: ${themeGet('space.6')};
+ will-change: scroll-position;
+ min-height: calc(100vh - 2*${themeGet('space.containerBorderMobile')});
+ `};
+`;
+
+const Headline = styled.h1`
+ color: ${themeGet('colors.black')};
+ font-family: ${themeGet('fonts.headline')};
+ font-size: ${themeGet('fontSizes.xl')};
+ font-weight: bold
+ text-transform: uppercase;
+ margin-bottom: ${themeGet('space.3')};
+`;
+
+const Text = styled.p`
+ color: ${themeGet('colors.black')};
+ font-family: ${themeGet('fonts.body')};
+ font-size: ${themeGet('fontSizes.m')};
+`;
+
+const NotFoundPage = ({ location }) => (
+ <Layout location={location}>
+ <TextContainer>
+ <Headline>Not Found</Headline>
+ <Text>You just hit a route that doesn&#39;t exist... the sadness.</Text>
+ <StyledLink
+ to="/portraits"
+ fontFamily="body"
+ fontSize={['m', 'l']}
+ color="black"
+ >
+ Find some images here
+ </StyledLink>
+ </TextContainer>
+ </Layout>
 );
 
+NotFoundPage.propTypes = {
+ location: locationType.isRequired,
+};
+
 export default NotFoundPage;