extra stuffs

dailybruin · Dec 8, 2019 · 43a3e86 · 43a3e86
1 parent d89a9ff
commit 43a3e86
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'react-emotion'
 import { css } from 'react-emotion'
 import Picture from '../../images/graybox.png'
-import Recycle from '../../images/recycle.svg'
 
 const OutDiv = styled('div')`
   display: flex;
@@ -13,8 +12,6 @@ const OutDiv = styled('div')`
   align-items: center;
   text-align: center;
   color: #fefbf4;
-  background-color: #6d786a;
-  background-image: url(${Recycle});
   flex-direction: column;
   padding: 1.5vh;
   @media only screen and (max-width: 800px) {

diff --git a/src/components/Intro/Intro.tsx b/src/components/Intro/Intro.tsx
@@ -55,6 +55,7 @@ const NameSpace = styled('div')`
 `
 
 const Content = styled('div')`
+  margin-top: 3vh;
   font-family: Heebo;
   font-size: 18px;
   line-height: 26px;

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,9 +8,12 @@ import {
   XPosition,
   YPosition,
 } from '@dailybruin/lux'
+import styled from 'react-emotion'
+import { css } from 'react-emotion'
 import Card from '../components/Card/Card'
 import Intro from '../components/Intro/Intro'
 import Cover from '../components/Cover/Cover'
+import Recycle from '../images/recycle.svg'
 
 export const query = graphql`
   query {
@@ -40,6 +43,20 @@ export const query = graphql`
   }
 `
 
+const Page = styled('div')`
+  background-color: #6d786a;
+  background-image: url(${Recycle});
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const Divide = styled('hr')`
+  background: #fefbf4;
+  width: 80%;
+  margin-top: 7vh;
+`
+
 const IndexPage = ({ data }) => (
   <>
     {console.log(data.kerckhoffArticle.Categories)}
@@ -49,14 +66,21 @@ const IndexPage = ({ data }) => (
       PageTitle={data.kerckhoffArticle.PageTitle}
       Explainer={data.kerckhoffArticle.Explainer}
     />
-    {data.kerckhoffArticle.Categories.map(category => (
-      <Card {...category} />
-    ))}
-    {/* <Article dropcap={true} content={data.kerckhoffArticle.content} /> */}
-    <Footer
-      developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu"
-      copyrightYear={2019}
-    />
+    <Page>
+      {data.kerckhoffArticle.Categories.map(category => (
+        <Card {...category} />
+      ))}
+      <Divide />
+      <Footer
+        developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu"
+        copyrightYear={2019}
+        style={css`
+          margin-bottom: 0px;
+          padding-bottom: 30px;
+          color: #fefbf4;
+        `}
+      />
+    </Page>
   </>
 )