Sonia awards

src/components/awards-card.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Link from 'gatsby-link';
+import '../css/bootstrap.css';
+import '../css/awards-card.scss';
+
+class AwardsCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      organization: props.organization,
+      year: props.year,
+      cards: [
+        {
+          award: props.cardsInfo[0].award,
+          title: props.cardsInfo[0].title,
+          author: props.cardsInfo[0].author
+        },
+        {
+          award: props.cardsInfo[1].award,
+          title: props.cardsInfo[1].title,
+          author: props.cardsInfo[1].author
+        },
+        {
+          award: props.cardsInfo[2].award,
+          title: props.cardsInfo[2].title,
+          author: props.cardsInfo[2].author
+        },
+        {
+          award: props.cardsInfo[3].award,
+          title: props.cardsInfo[3].title,
+          author: props.cardsInfo[3].author
+        },
+        {
+          award: props.cardsInfo[4].award,
+          title: props.cardsInfo[4].title,
+          author: props.cardsInfo[4].author
+        }
+      ]
+    };
+  }
+
+  renderAwardsList () {
+    return this.state.cards.map(function(e, i) {
+      let subtext = (e.title == "" ? e.author :
+          '"' + e.title + '"' + " by " + e.author);
+      return (
+        <p className="list-item">
+          <span className="list-item__text">{e.award}</span>
+          <br/>
+          {subtext}
+        </p>
+      );
+    });
+  }
+
+  render () {
+    return (
+      <div className="box">
+        <div className="box__subheader">
+          <h3 className="box__subheader--title">{this.state.organization}</h3>
+          <p className="box__subheader--year">{this.state.year}</p>
+        </div>
+        <div className="box__awardslist">
+          {this.renderAwardsList()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AwardsCard;

src/css/awards-card.scss

@@ -0,0 +1,41 @@
+.box {
+  box-shadow: 0px 5px 8px rgba(38, 77, 104, 0.4);
+  width: 95%;
+  border-radius: 5px;
+
+}
+
+.box__subheader {
+  border-radius: 5px 5px 0px 0px;
+  background-color: #A5D2F0;
+  color: white;
+  font-family: BentonSans-Medium;
+  letter-spacing: 1px;
+}
+
+.box__awardslist {
+  padding: 3% 7% 3% 7%;
+  font-family: BentonSans-Book;
+  color: #264D68;
+}
+
+.box__subheader--title {
+  padding: 5% 7% 0% 7%;
+  text-align: center;
+  line-height: 1.5;
+
+}
+
+.box__subheader--year {
+  text-align: right;
+  padding-right: 5%;
+  padding-bottom: 3%;
+}
+
+.list-item {
+  padding-bottom: 5px;
+}
+
+.list-item__text{
+  font-family: BentonSans-Medium;
+}

src/css/awards.scss

@@ -0,0 +1,42 @@
+.blue_box {
+  margin: 0 auto;
+  width: 100%;
+  background-color: #264D68;
+  height: 50%;
+}
+
+.panel {
+  background-color: #264D68;
+  width: 100%;
+  height: 30vw;
+  color: white;
+}
+
+.panel__title {
+  font-family: BentonSans-Bold;
+  font-size: 48px;
+  text-align: center;
+}
+
+
+.panel__subtitle {
+  font-family: BentonSans-Book;
+  font-size: 13px;
+  width: 70%;
+  text-align: center;
+  margin: auto;
+  line-height: 1.8;
+}
+
+.awards {
+  display: flex;
+}
+
+.awards__left {
+  padding-left: 8%;
+  padding-right: 4%;
+}
+
+.awards__right {
+  padding-right: 8%;
+}

src/layouts/index.js

@@ -4,7 +4,7 @@ import Helmet from 'react-helmet'
 
 import Header from '../components/Header'
 import './index.css'
-import '../../public/static/css/bootstrap.css'
+import '../../static/bootstrap.css'
 
 const TemplateWrapper = ({ children }) => (
   <div>

src/pages/awards.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import Link from 'gatsby-link';
+{/*import '../css/bootstrap.css';*/}
+import '../css/awards.scss';
+import AwardsCard from '../components/awards-card.js';
+
+
+//const AwardsPage = () => (
+class AwardsPage extends React.Component {
+  renderAwardsCards () {
+    {/*Need to do this for every AwardsCard in the set of organizations*/}
+    return (
+      <AwardsCard
+          organization = "Society of Professional Journalists"
+          year = "2016-2017"
+          cardsInfo = {[
+            {
+              award: "1st place Best All-around Daily Student Newspaper",
+              title: "",
+              author: "The Daily Californian Staff"
+            },
+            {
+              award: "Finalist Best News Reporting",
+              title: "19 campus employees violated UC sexual harassment policies in past seven years",
+              author: "Alexandra Yoon-Hendricks, Katy Abbott and Melissa Wen"
+            },
+            {
+              award: "Finalists Best Breaking News Story",
+              title: "Thousands of East Bay high schoolers flood Berkeley streets protesting Trump victory",
+              author: "The Daily Californian Staff"
+            },
+            {
+              award: "Finalist Best Feature Writing",
+              title: "The sky in the east was bright red",
+              author: "Alexandra Yoon-Hendricks"
+            },
+            {
+              award: "Finalist Best Sports Column Writing",
+              title: "Sports with Sophie",
+              author: "Sophie Goethals"
+            }
+          ]}
+      />
+    );
+  }
+
+  render () {
+    return (
+      <div>
+        <div className="blue_box"></div>
+        <div className="panel">
+            <h1 className="panel__title">Awards & Honors</h1>
+            <p className="panel__subtitle">In recent years, the Daily Cal has earned dozens of awards on a regional and national level for its
+              comprehensive and high-quality coverage of UC Berkeley, the city of Berkeley and the entire UC system. In 2016,
+              the Society of Professional Journalists declared the Daily Californian to be the best daily student newspaper in
+              California, Nevada, Arizona and Hawaii.
+            </p>
+        </div>
+        <div className="awards">
+          <div className="awards__left">
+            {this.renderAwardsCards()}
+          </div>
+          <div className="awards__right">
+            {this.renderAwardsCards()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AwardsPage;