import React from 'react';
import styled from 'styled-components';
import Helmet from 'react-helmet';

import Back from 'components/Back';
import { VerkkokauppaCom } from 'components/Portfolio/VerkkokauppaCom';
import { HumbleBundle } from 'components/Portfolio/HumbleBundle';
import { Icons } from 'components/Portfolio/Icons';

export const ButtonLink = styled.a`
  background: white !important;
  border-radius: 2px;
  color: #333333 !important;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin: 1rem 0;
  display: inline-block;
  line-height: 16px;
  padding: 12px 16px;
  transition: color 125ms ease-in, box-shadow 125ms ease-in;

  &:hover {
    color: #2171cc !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  &:active {
    color: #333333 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
  }
`;

const Container = styled.div`
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
`;

const Header = styled.header`
  background-color: white;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  padding: 2rem 3rem 4rem;
  text-align: center;
`;

const More = styled.p`
  color: hsla(0, 0%, 60%, 1);
  font-family: Georgia, serif;
  font-size: 1.5em;
  font-style: italic;
  margin: 4rem auto;
  text-align: center;
`;

const PortfolioIndex = () => (
  <div>
    <Helmet title="Portfolio of Iiro Jäppinen" />
    <Container>
      <Back />
      <Header>
        <h1>Portfolio of Iiro Jäppinen</h1>
      </Header>
      <VerkkokauppaCom />
      <HumbleBundle />
      <Icons />
    </Container>
    <aside>
      <More>With more coming soon...</More>
    </aside>
  </div>
);

export default PortfolioIndex;

@@ -974,47 +974,19 @@
 %60%0A  
-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05)
+width: 100%25
 ;%0A%60;
@@ -1117,17 +1117,17 @@
 em 3rem 
-4
+6
 rem;%0A  t
@@ -1281,25 +1281,23 @@
 ;%0A  
-marg
+padd
 in
+g
 : 4rem 
-auto
+0
 ;%0A  
@@ -1353,29 +1353,32 @@
  =%3E 
-(
+%5B
 %0A  %3C
-div%3E%0A    %3CHelmet
+Helmet key=%22helmet%22
  tit
@@ -1411,19 +1411,18 @@
 inen%22 /%3E
+,
 %0A
-  
   %3CConta
@@ -1425,20 +1425,34 @@
 ontainer
+ key=%22container%22
 %3E%0A
-  
     %3CBac
@@ -1460,18 +1460,16 @@
  /%3E%0A    
-  
 %3CHeader%3E
@@ -1465,26 +1465,24 @@
    %3CHeader%3E%0A
-  
       %3Ch1%3EPo
@@ -1515,18 +1515,16 @@
 h1%3E%0A    
-  
 %3C/Header
@@ -1521,26 +1521,24 @@
   %3C/Header%3E%0A
-  
     %3CVerkkok
@@ -1553,18 +1553,16 @@
  /%3E%0A    
- 
- 
 %3CHumbleB
@@ -1574,18 +1574,16 @@
  /%3E%0A    
-  
 %3CIcons /
@@ -1593,30 +1593,25 @@
    %3C
-/Container%3E%0A    %3C
+aside key=%22
 aside
+%22
 %3E%0A  
@@ -1673,14 +1673,21 @@
   %3C/
-div%3E%0A)
+Container%3E,%0A%5D
 ;%0A%0Ae

Update Portfolio layout to work in new container