Merge pull request #39 from the-programmers-hangout/feature/sparks/responsiveness-proposal

fix(layout): centered layout with responsive principles applied

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 */
+  margin: 20px;
-  /* this ensures the logo never goes off screen */
-  /* TODO: most likely extract this number */
-  padding: 0 calc(172px + 32px);
-  margin: 0 auto;
-  width: 100%;
   max-width: 800px;
 
   & > :first-child {

src/components/Footer/index.tsx

@@ -6,9 +6,12 @@ export function Footer() {
   return (
     <SC.FooterWrapper>
       <Container>
-        © {new Date().getFullYear()}, Built with
+        <p>
-        {` `}
+          © {new Date().getFullYear()}, Built with
-        <a href="https://www.gatsbyjs.org">Gatsby</a>
+          {` `}
+          <a href="https://www.gatsbyjs.org">Gatsby</a>
+        </p>
+
       </Container>
     </SC.FooterWrapper>
   )

src/components/Footer/styles.tsx

@@ -1,4 +1,11 @@
 import { Link } from "gatsby"
 import styled from "styled-components"
 
-export const FooterWrapper = styled.footer``
+export const FooterWrapper = styled.footer`
+  max-width: 840px;
+  margin: auto auto;
+
+  & a {
+    display: inline;
+  }
+`

src/components/Header/styles.tsx

@@ -1,27 +1,29 @@
 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;
+  margin-bottom: 10px;
 `
 
 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 +34,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 +79,4 @@ export const MenuItem = styled(Link)`
       background: #d33636;
     }
   }
-
-  & + & {
-    margin-left: 48px;
-  }
 `

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;