Add gallery page and compoents/CSS

unfinished

src/components/GalleryPage.jsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import LightboxGallery from './LightboxGallery'
+import Social from './Social'
+
+export default class Gallery extends Component {
+  render() {
+    return (
+      <div id="gallery">
+        <LightboxGallery />
+        <Social />
+      </div>
+    )
+  }
+}

src/components/LightboxGallery.jsx

@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import Gallery from 'react-photo-gallery'
+import Lightbox from 'react-images'
+import lightboxImages from './res/lightbox'
+import '../styles/App.css'
+
+export default class LightboxGallery extends Component {
+  constructor() {
+    super()
+    this.state = { currentImage: 0 }
+    this.closeLightbox = this.closeLightbox.bind(this)
+    this.openLightbox = this.openLightbox.bind(this)
+    this.gotoNext = this.gotoNext.bind(this)
+    this.gotoPrevious = this.gotoPrevious.bind(this)
+  }
+  openLightbox(event, obj) {
+    this.setState({
+      currentImage: obj.index,
+      lightboxIsOpen: true
+    })
+  }
+  closeLightbox() {
+    this.setState({
+      currentImage: 0,
+      lightboxIsOpen: false
+    })
+  }
+  gotoPrevious() {
+    this.setState({
+      currentImage: this.state.currentImage - 1
+    })
+  }
+  gotoNext() {
+    this.setState({
+      currentImage: this.state.currentImage + 1
+    })
+  }
+  render() {
+    return (
+      <div>
+        <Gallery
+          photos={lightboxImages}
+          margin={4}
+          onClick={this.openLightbox}
+        />
+        <Lightbox
+          images={lightboxImages}
+          backdropClosesModal={true}
+          onClickNext={this.gotoNext}
+          onClose={this.closeLightbox}
+          onClickPrev={this.gotoPrevious}
+          isOpen={this.state.lightboxIsOpen}
+          currentImage={this.state.currentImage}
+        />
+      </div>
+    )
+  }
+}

src/components/res/lightbox.js

@@ -0,0 +1,64 @@
+const lightboxImages = [
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/cannon-north.png',
+    width: 4,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/boat-mount.png',
+    width: 5,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/plu-tu.png',
+    width: 4,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/highrock-full.jpg',
+    width: 3,
+    height: 4
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/snake-lake.jpg',
+    width: 3,
+    height: 4
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/highrock-tall.jpg',
+    width: 2,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/rowena.jpg',
+    width: 3,
+    height: 4
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/alder-s.jpg',
+    width: 4,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full//twin-forrest.jpg',
+    width: 4,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/wachlella-le-fe.jpg',
+    width: 4,
+    height: 3
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/browns-rainer.png',
+    width: 3,
+    height: 4
+  },
+  {
+    src: 'https://res.cloudinary.com/dev01d/full/tok-deg.jpg',
+    width: 3,
+    height: 4
+  }
+]
+
+export default lightboxImages

src/styles/App.css

@@ -1,29 +1,39 @@
 /*
-TODO: move to semUI 
+TODO: move to semUI
 TODO: Fix Safari box shadow weirdness
 */
 
 html,
 body {
   height: 100%;
   min-height: 100%;
-  height: auto !important;
-  background: linear-gradient(to bottom, #dedfe4 0%, #a1a3a3 40%);
+  background: #a1a3a3 40%;
+  /* height: auto !important; */
+  /*background: linear-gradient(to bottom, #dedfe4 0%, #a1a3a3 40%); */
 }
 h2,
 p {
-  color: #848484;
+  color: #000000;
   font-weight: 400;
   font-size: 16px;
   letter-spacing: 0.4px;
   line-height: 28px;
 }
 #home {
+  background: #a1a3a3 40%;
   max-width: 40rem;
+  /* width: 100%; */
   padding: 3rem 2rem;
   margin: 0 auto;
   height: 100%;
 }
+#gallery {
+  background: #fff;
+  display: block;
+  border: 1px solid #fff;
+  padding: 6rem 0 0 0;
+  overflow: none;
+}
 svg {
   border-radius: 60%;
   -webkit-appearance: none;