From 2e85d8e9f10107191c7826d553fb548f24ac8426 Mon Sep 17 00:00:00 2001
From: Thomas Ibarra <hello@imake.software>
Date: Tue, 30 Jul 2019 17:23:59 -0500
Subject: [PATCH 1/3] fix(layout): centered layout with responsive principles
 applied

---
 src/components/Container/styles.tsx |  7 +------
 src/components/Footer/index.tsx     |  9 ++++++---
 src/components/Footer/styles.tsx    |  6 +++++-
 src/components/Header/styles.tsx    | 18 ++++++++----------
 src/components/Layout/styles.tsx    |  3 ++-
 5 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx
index 6217b65..5ff5bcb 100644
--- a/src/components/Container/styles.tsx
+++ b/src/components/Container/styles.tsx
@@ -3,12 +3,7 @@ import styled from "styled-components"
 export const ContainerWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  /* the 172px is necessary because the logo is offset by that much */
-  /* this ensures the logo never goes off screen */
-  /* TODO: most likely extract this number */
-  padding: 0 calc(172px + 32px);
-  margin: 0 auto;
-  width: 100%;
+  margin: 20px;
   max-width: 800px;
 
   & > :first-child {
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index ec60265..82585cd 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -6,9 +6,12 @@ export function Footer() {
   return (
     <SC.FooterWrapper>
       <Container>
-        © {new Date().getFullYear()}, Built with
-        {` `}
-        <a href="https://www.gatsbyjs.org">Gatsby</a>
+        <p>
+          © {new Date().getFullYear()}, Built with
+          {` `}
+          <a href="https://www.gatsbyjs.org">Gatsby</a>
+        </p>
+
       </Container>
     </SC.FooterWrapper>
   )
diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
index 7afaac6..e73d4a5 100644
--- a/src/components/Footer/styles.tsx
+++ b/src/components/Footer/styles.tsx
@@ -1,4 +1,8 @@
 import { Link } from "gatsby"
 import styled from "styled-components"
 
-export const FooterWrapper = styled.footer``
+export const FooterWrapper = styled.footer`
+  & a {
+    display: inline;
+  }
+`
diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
index e0970c7..5ec27db 100644
--- a/src/components/Header/styles.tsx
+++ b/src/components/Header/styles.tsx
@@ -1,27 +1,28 @@
 import { Link } from "gatsby"
 import styled from "styled-components"
 
-export const HeaderWrapper = styled.header``
+export const HeaderWrapper = styled.header`
+  margin: 0 auto 20px;
+`
 
 export const InnerWrapper = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  height: 122px;
+  flex-direction: column;
 `
 
 export const Logo = styled.img`
-  position: absolute;
-  margin-right: 50px;
-  left: calc(-122px - 50px);
   width: 122px;
   height: 122px;
 `
 
 export const Menu = styled.nav`
-  margin-top: 16px;
   display: flex;
   align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: 100%;
 `
 
 export const MenuItem = styled(Link)`
@@ -32,6 +33,7 @@ export const MenuItem = styled(Link)`
   color: #555;
   position: relative;
   transition: color 0.3s;
+  margin: 5px 10px;
 
   /* underline bar, getting animated through hover */
   &::after {
@@ -76,8 +78,4 @@ export const MenuItem = styled(Link)`
       background: #d33636;
     }
   }
-
-  & + & {
-    margin-left: 48px;
-  }
 `
diff --git a/src/components/Layout/styles.tsx b/src/components/Layout/styles.tsx
index 586bafd..a18c523 100644
--- a/src/components/Layout/styles.tsx
+++ b/src/components/Layout/styles.tsx
@@ -3,12 +3,13 @@ import styled from "styled-components"
 export const Main = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 128px auto 64px !important;
+  margin: 20px auto;
   width: 100%;
 `
 
 export const MainContent = styled.main`
   flex: 1 0 auto;
+  margin: 0 auto;
 
   & > :first-child {
     margin-top: 0;

From a39d5e5ac01badb94a5fe70285ea163e8ad1f961 Mon Sep 17 00:00:00 2001
From: Thomas Ibarra <hello@imake.software>
Date: Tue, 30 Jul 2019 17:45:27 -0500
Subject: [PATCH 2/3] fix(logo): adjust spacing between logo and menu

---
 src/components/Header/styles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
index 5ec27db..8ea4cee 100644
--- a/src/components/Header/styles.tsx
+++ b/src/components/Header/styles.tsx
@@ -15,6 +15,7 @@ export const InnerWrapper = styled.div`
 export const Logo = styled.img`
   width: 122px;
   height: 122px;
+  margin-bottom: 10px;
 `
 
 export const Menu = styled.nav`

From fc0683a40754891788198c296a787c3001573dcf Mon Sep 17 00:00:00 2001
From: Thomas Ibarra <hello@imake.software>
Date: Tue, 30 Jul 2019 17:50:33 -0500
Subject: [PATCH 3/3] fix(footer): adjust width for center panel

---
 src/components/Footer/styles.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
index e73d4a5..8e1f496 100644
--- a/src/components/Footer/styles.tsx
+++ b/src/components/Footer/styles.tsx
@@ -2,6 +2,9 @@ import { Link } from "gatsby"
 import styled from "styled-components"
 
 export const FooterWrapper = styled.footer`
+  max-width: 840px;
+  margin: auto auto;
+
   & a {
     display: inline;
   }