ui: wip on styling resources page

src/components/ResourcesLayout/index.tsx

@@ -10,7 +10,6 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import { GlobalStyles } from "../../globalStyles"
 import { ResourcesSidebar } from "../ResourcesSidebar"
-import { Footer } from "../Footer"
 import * as SC from "./styles"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
@@ -30,11 +29,12 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
       <SC.Main>
         <ResourcesSidebar />
         <SC.MainContent>
-          <h1>{data.site.siteMetadata.title}</h1>
-          {children}
+          <SC.Container>
+            <h1>{data.site.siteMetadata.title}</h1>
+            {children}
+          </SC.Container>
         </SC.MainContent>
       </SC.Main>
-      <Footer />
     </div>
   )
 }

src/components/ResourcesLayout/styles.tsx

@@ -2,12 +2,13 @@ import styled from "styled-components"
 
 export const Main = styled.div`
   display: flex;
-  margin: 128px auto 64px !important;
   width: 100%;
+  min-height: 100vh;
 `
 
 export const MainContent = styled.main`
   flex: 1 1 auto;
+  margin-top: 128px;
 
   & > :first-child {
     margin-top: 0;
@@ -17,3 +18,8 @@ export const MainContent = styled.main`
     margin-bottom: 0;
   }
 `
+
+export const Container = styled.div`
+  width: 650px;
+  margin: 0 auto;
+`