Add transport page

src/components/Map/Map.js

@@ -35,7 +35,7 @@ class Map extends React.Component {
             style={{
               height: '360px',
               width: '100%',
-              'max-width': '480px',
+              maxWidth: '480px',
               overflow: 'hidden',
             }}
           />
@@ -45,7 +45,7 @@ class Map extends React.Component {
             style={{
               height: '360px',
               width: '100%',
-              'max-width': '480px',
+              maxWidth: '480px',
             }}
           />
         }

src/components/Navigation/Navigation.css

@@ -3,13 +3,21 @@
   top: 0;
   right: 0;
   left: 0;
-  text-align: center;
+  height: 40px;
   background: rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  text-align: center;
 }
 
 .link {
   display: inline-block;
-  padding: 8px 8px 6px;
+  padding: 8px 2% 6px;
   text-decoration: none;
   font-size: 1.125em;
   border-bottom: 2px solid transparent;

src/components/Navigation/Navigation.js

@@ -14,10 +14,13 @@ class Navigation extends React.Component {
     }
     return (
       <div className={s.root} role="navigation">
+        <div className={s.container}>
           <Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
           <Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
           <Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/reception">Venue</Link>
           <Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/accomodation">Hotels</Link>
+          <Link className={[s.link, this.props.current === 'transport' ? s.active : null].join(' ')} to="/transport">Transport</Link>
+        </div>
       </div>
     );
   }

src/routes/index.js

@@ -12,6 +12,7 @@ export default {
     require('./ceremony').default,
     require('./reception').default,
     require('./accomodation').default,
+    require('./transport').default,
     require('./login').default,
     require('./admin').default,
     require('./adminPeople').default,

src/routes/transport/Transport.css

@@ -0,0 +1,54 @@
+@import '../../components/variables.css';
+
+.root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/offley_2560.jpg');
+  background-size: cover;
+  background-position-x: 54%;
+  background-color: #c1c1c1;
+  filter: grayscale(1) brightness(0.6);
+  z-index: -1;
+  transition: filter ease-in-out 0.5s;
+}
+
+.container {
+  padding-top: 50px;
+  margin: 0 20px;
+}
+
+.headings {
+  max-width: 640px;
+  margin: 0 auto 40px;
+  text-align: center;
+  color: #fff;
+  text-shadow: 3px 3px 8px var(--colour-nearblack);
+  font-size: 1.3em;
+}
+
+.headings h1 {
+  margin: 0 0 10px;
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  color: #fff;
+  text-shadow: 1px 1px 4px var(--colour-nearblack);
+}
+
+.tel {
+  color: rgba(255, 255, 255, 0.8);
+  transition: color 0.3s ease-in;
+}
+
+.tel:hover,
+.tel:focus {
+  color: rgba(255, 255, 255, 1);
+}

src/routes/transport/Transport.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Transport.css';
+import Map from '../../components/Map';
+
+const offley = [
+  {
+    title: 'Offley Place',
+    url: 'http://www.offleyplace.com/',
+    lat: 51.9282,
+    lng: -0.3332,
+  },
+];
+
+const stations = [
+  {
+    title: 'Hitchin',
+    lat: 51.9532,
+    lng: -0.2655,
+  },
+  {
+    title: 'Luton',
+    lat: 51.8820,
+    lng: -0.4171,
+  },
+  {
+    title: 'Luton Airport Parkway',
+    lat: 51.8724,
+    lng: -0.3984,
+  },
+];
+
+class Transport extends React.Component {
+  render() {
+    return (
+      <div className={s.root}>
+        <div className={s.bgImage} />
+        <div className={s.container}>
+          <div className={s.headings}>
+            <h1>Transport</h1>
+          </div>
+          <div className={s.content}>
+            <h3>Train</h3>
+            <p>There are 3 stations nearby, Hitchin, Luton and Luton Parkway (airport).
+              All trains terminate at London St Pancras or London Kings Cross</p>
+            <Map
+              defaultZoom={11}
+              lat={offley[0].lat}
+              lng={offley[0].lng}
+              markers={stations}
+            />
+            <h3>Car</h3>
+            <p>Offley Place has secure parking facilities.</p>
+            <p>The following taxi companies are recommended:</p>
+            <ul>
+              <li>
+                Circuit Cars &ndash; <a className={s.tel} href="tel:+441582454545">01582454545</a>
+              </li>
+              <li>
+                Tiny&#8217;s Taxis (Hitchin) &ndash; <a className={s.tel} href="tel:+441462434743">01462434743</a>
+              </li>
+              <li>
+                Area Cars (Luton) &ndash; <a className={s.tel} href="tel:+441582404040">01582404040</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Transport);

src/routes/transport/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Transport from './Transport';
+import Layout from '../../components/Layout';
+
+export default {
+
+  path: '/transport',
+
+  action() {
+    return {
+      title: 'Transport',
+      component: <Layout current="transport"><Transport /></Layout>,
+    };
+  },
+};