Merge pull request #33 from Blakeinstein/master

gatsby-browser.js

@@ -1,16 +1,9 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/browser-apis/
- */
-
 import "./src/css/global.css";
 import React from "react";
 import Layout from "./src/components/layout";
 
 require('typeface-rubik');
 
-// Wraps every page in a component
 export const wrapPageElement = ({ element, props }) => {
   return <Layout {...props}>{element}</Layout>
 }

gatsby-ssr.js

@@ -1,7 +1,6 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/ssr-apis/
- */
+import React from "react";
+import Layout from "./src/components/layout";
 
-// You can delete this file if you're not using it
+export const wrapPageElement = ({ element, props }) => {
+    return <Layout {...props}>{element}</Layout>
+}

src/components/eventCard.js

@@ -8,8 +8,9 @@ function EventCard(props) {
   const { title, description, attachments, link } = props
   const startDate = moment(props.startDate)
   const endDate = moment(props.endDate)
-
-  const imageAttachment = attachments.find(a => a.mimeType.startsWith("image/"))
+  let imageAttachment = null;
+  if (attachments)
+    imageAttachment = attachments.find(a => a.mimeType.startsWith("image/")) || null;
   let imageUrl = imageAttachment
     ? "https://drive.google.com/uc?export=view&id=" + imageAttachment.fileId
     : "https://drive.google.com/uc?export=view&id=1FQCwCAFxeagUXASyYQEIFljeQ-dTqiOU"

src/components/layout.js

@@ -7,11 +7,9 @@ import "../css/layout.css"
 
 import Hero from "./hero"
 
-const Layout = props => {
-  const { children, path } = props;
-
+const Layout = ({children, path}) => {
   return (
-    <>
+    <div id="Page">
       <div id="hero">
         <Hero/>
       </div>
@@ -20,7 +18,7 @@ const Layout = props => {
         <div className="content">{children}</div>
         <Footer />
       </div>
-    </>
+    </div>
   )
 }
 

src/css/layout.css

@@ -24,8 +24,13 @@
 }
 
 .wrapper .footer {
-  flex: 0 0 10px;
+  flex: 0 0 20px;
+  padding-bottom: 10px;
   color: white;
+  background: -webkit-linear-gradient(#eee, #333);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 #hero {
@@ -36,7 +41,10 @@
   visibility: visible;
 }
 
-#hero.hide {
-  opacity: 0;
-  transition: opacity 0.1s ease-in;
+#Page {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
 }