Merge pull request #46 from the-programmers-hangout/feature/sparks/refactor-container-styles

refact: reduce container styles complexity

src/components/Container/styles.tsx

@@ -1,16 +1,4 @@
 import styled from "styled-components"
 
 export const ContainerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 20px;
-  max-width: 800px;
-
-  & > :first-child {
-    margin-top: 0;
-  }
-
-  & > :last-child {
-    margin-bottom: 0;
-  }
-`
+  `

src/components/Footer/styles.tsx

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

src/components/Header/index.tsx

@@ -17,7 +17,6 @@ export function Header() {
       <Container>
         <SC.InnerWrapper>
           <SC.Logo src={logo} />
-
           <SC.Menu>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>

src/components/Header/styles.tsx

@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import styled from "styled-components"
 
 export const HeaderWrapper = styled.header`
-  margin: 0 auto 20px;
+  margin-bottom: 20px;
 `
 
 export const InnerWrapper = styled.div`
@@ -21,9 +21,8 @@ export const Logo = styled.img`
 export const Menu = styled.nav`
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
+  justify-content: center;
   flex-wrap: wrap;
-  width: 100%;
 `
 
 export const MenuItem = styled(Link)`

src/components/Layout/index.tsx

@@ -38,8 +38,8 @@ export function Layout({ children }: PropsWithChildren<{}>) {
             {children}
           </Container>
         </SC.MainContent>
+        <Footer />
       </SC.Main>
-      <Footer />
     </Scrollbar>
   )
 }

src/components/Layout/styles.tsx

@@ -3,19 +3,12 @@ import styled from "styled-components"
 export const Main = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 20px auto;
-  width: 100%;
+  align-items: center;
+  margin: 20px;
 `
 
 export const MainContent = styled.main`
-  flex: 1 0 auto;
-  margin: 0 auto;
-
-  & > :first-child {
-    margin-top: 0;
-  }
-
-  & > :last-child {
-    margin-bottom: 0;
-  }
+  display: flex;
+  justify-content: center;
+  max-width: 800px;
 `