From 22fe9240a6d28781e0d50cc5757852fd7f714d3a Mon Sep 17 00:00:00 2001
From: thenry3 <43651306+thenry3@users.noreply.github.com>
Date: Mon, 9 Dec 2019 14:06:36 -0800
Subject: [PATCH 1/2] revert to max's old stuff

---
 gatsby-config.js                 |  1 -
 src/components/Card/Card.tsx     | 95 ++++++++------------------------
 src/components/Heading/index.tsx |  1 +
 src/pages/index.tsx              |  2 +-
 src/templates/article.tsx        |  3 +-
 5 files changed, 26 insertions(+), 76 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 04caffd..5336a1d 100755
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -19,7 +19,6 @@ module.exports = {
     url,
     image,
   },
-  pathPrefix: '/2019/wasted-opportunity',
   plugins: [
     'gatsby-plugin-typescript',
     'gatsby-plugin-react-helmet',
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index b05beef..0fa6f8a 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -3,7 +3,6 @@ import styled from 'react-emotion'
 import { css } from 'react-emotion'
 import Picture from '../../images/graybox.png'
 import { Link } from 'gatsby'
-import { cardInnerPadding } from '@dailybruin/lux/src/globals/mainsiteGlobalStyles'
 
 const OutDiv = styled('div')`
   display: flex;
@@ -51,6 +50,7 @@ const Box = styled(Link)`
   }
   @media only screen and (max-width: 800px) {
     width: 75%;
+    margin-right: 0px;
     flex-direction: column;
   }
 `
@@ -78,6 +78,7 @@ const InnerBox = styled('div')`
   background-color: #6d786a;
   width: 60%;
   padding: 10px;
+  margin-right: 10px;
   display: flex;
   flex-direction: column;
   @media only screen and (max-width: 800px) {
@@ -97,7 +98,9 @@ const BoxTitle = styled('div')`
   align-items: left;
   color: #fffcf5;
   text-align: left;
-  padding: 10px;
+  padding-left: 20px;
+  padding-top: 15px;
+  padding-bottom: 20px;
   @media only screen and (max-width: 800px) {
     font-size: 18px;
     line-height: 23px;
@@ -128,23 +131,31 @@ const BoxContent = styled('div')`
   }
 `
 
+const BoxImg = props => css`
+  background: url(${props.pic});
+  background-size: cover;
+`
+
 const BoxImage = styled('div')`
   padding: 15px;
   margin: 15px;
   flex-grow: 2;
+  ${BoxImg}
   padding: 15px;
-  /* @media only screen and (max-width: 800px) {
+  @media only screen and (max-width: 800px) {
     flex-direction: column;
     padding: 20%;
     width: 50%;
+    margin: auto;
     margin-top: 20px;
   }
   @media only screen and (max-width: 414px) {
     flex-direction: column;
     padding: 35%;
     width: 80%;
+    margin: auto;
     margin-top: 20px;
-  } */
+  }
 `
 
 interface CardProps {
@@ -163,9 +174,6 @@ const TITLE_TO_LINK_MAPPING = {}
 const is_external = href => !(href[0] == '/')
 
 export default class Card extends React.Component<CardProps> {
-  componentDidMount() {
-    console.log(this.props.Cards)
-  }
   render() {
     return (
       <OutDiv id={this.props.CategoryName.replace(/\s/g, '')}>
@@ -173,82 +181,25 @@ export default class Card extends React.Component<CardProps> {
         {/* <Blurb>
           <p>{this.props.TopicDesc}</p>
         </Blurb> */}
-        {this.props.Cards.map(card => {
-          return card.PageLink == 'external' ? (
-            <a
-              href={
-                card.PageLink == 'external'
-                  ? 'https://dailybruin.com/2019/12/09/gallery-heres-how-ucla-mixed-recycling-gets-processed/'
-                  : ''
-              }
-              className={css`
-                text-decoration: none;
-                color: #fefbf4;
-                display: flex;
-                flex-direction: row-reverse;
-                background-color: #6d786a;
-                width: 60%;
-                box-shadow: 0 0 5px 0px #282a2d;
-                margin: 10px;
-                transition: 0.3s;
-                text-decoration: none;
-                &:hover {
-                  box-shadow: 0 0 5px 1.5px #282a2d;
-                }
-                @media only screen and (max-width: 800px) {
-                  width: 75%;
-                  margin-right: 0px;
-                  flex-direction: column;
-                }
-              `}
-            >
-              {' '}
-              <BoxImage>
-                <div
-                  className={css`
-                    height: 100%;
-                    width: 100%;
-                    @media only screen and (max-width: 800px) {
-                      height: 200px;
-                      width: 100%;
-                    }
-                    background: url(${card.ImageURL});
-                    background-size: cover;
-                    background-position: bottom;
-                  `}
-                />
-              </BoxImage>
-              {/* <img src={card.ImageURL} /> */}
+        {this.props.Cards.map(card =>
+          is_external(card.PageLink) ? (
+            <BoxExternal href={card.PageLink}>
+              <BoxImage pic={card.ImageURL} />
               <InnerBox>
                 <BoxTitle>{card.Title}</BoxTitle>
                 <BoxContent>{card.Blurb}</BoxContent>
               </InnerBox>
-            </a>
+            </BoxExternal>
           ) : (
-            <Box to={`${card.PageLink}`}>
-              <BoxImage>
-                <div
-                  className={css`
-                    height: 100%;
-                    width: 100%;
-                    @media only screen and (max-width: 800px) {
-                      height: 200px;
-                      width: 100%;
-                    }
-                    background: url(${card.ImageURL});
-                    background-size: cover;
-                    background-position: bottom;
-                  `}
-                />
-              </BoxImage>
-              {/* <img src={card.ImageURL} /> */}
+            <Box to={`/${card.PageLink}`}>
+              <BoxImage pic={card.ImageURL} />
               <InnerBox>
                 <BoxTitle>{card.Title}</BoxTitle>
                 <BoxContent>{card.Blurb}</BoxContent>
               </InnerBox>
             </Box>
           )
-        })}
+        )}
       </OutDiv>
     )
   }
diff --git a/src/components/Heading/index.tsx b/src/components/Heading/index.tsx
index f688ff0..0b73279 100644
--- a/src/components/Heading/index.tsx
+++ b/src/components/Heading/index.tsx
@@ -22,6 +22,7 @@ const Wrapper = styled('div')`
 const HeadTitle = styled('p')`
   font-size: 48px;
   margin-top: 5vh;
+  text-align: center;
   @media only screen and (max-width: 800px) {
     font-size: 30px;
     line-height: 45px;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e3d6689..2034407 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -77,7 +77,7 @@ const IndexPage = ({ data }) => (
       ))}
       <Divide />
       <Footer
-        developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu"
+        developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu, Lauren Ho"
         copyrightYear={2019}
         style={css`
           margin-bottom: 0px;
diff --git a/src/templates/article.tsx b/src/templates/article.tsx
index 31e7d85..2631b18 100644
--- a/src/templates/article.tsx
+++ b/src/templates/article.tsx
@@ -2,13 +2,12 @@ import * as React from 'react'
 import { graphql } from 'gatsby'
 import { css } from 'react-emotion'
 import styled from 'react-emotion'
-import { Article, Footer, Image, PullQuote } from '@dailybruin/lux'
+import { Article, Footer, Image, PullQuote, Video } from '@dailybruin/lux'
 import Heading from '../components/Heading'
 import PieChart from '../components/Graphs/PieChart'
 import BarChart from '../components/Graphs/BarChart'
 import Recycle from '../images/recycle.svg'
 import ArticleNav from '../components/ArticleNav/ArticleNav'
-import { Video } from '../components/Video'
 
 export const query = graphql`
   query($name: String) {

From b76897622139935592681ab67322b6727cb41cfb Mon Sep 17 00:00:00 2001
From: thenry3 <43651306+thenry3@users.noreply.github.com>
Date: Mon, 9 Dec 2019 14:07:24 -0800
Subject: [PATCH 2/2] added lauren's name

---
 src/templates/article.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/article.tsx b/src/templates/article.tsx
index 2631b18..134b758 100644
--- a/src/templates/article.tsx
+++ b/src/templates/article.tsx
@@ -123,7 +123,7 @@ const ArticlePage = ({ data }) => (
           margin-bottom: 0px;
           color: #fffcf5;
         `}
-        developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu"
+        developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu, Lauren Ho"
         copyrightYear={2019}
       />
     </Wrapper>