Add Ceremony page with google map

Add nav bar to public pages

src/routes/ceremony/Ceremony.css

@@ -0,0 +1,56 @@
+@import '../../components/variables.css';
+
+.root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/church_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;
+}
+
+.bgImageFocus {
+  filter: grayscale(0.4) brightness(1);
+}
+
+.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;
+}
+
+.subheading {
+  font-family: var(--font-family-cursive);
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  color: #fff;
+  text-shadow: 1px 1px 4px var(--colour-nearblack);
+}
+
+.map {
+  width: 360px;
+}

src/routes/ceremony/Ceremony.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Ceremony.css';
+import CeremonyMap from '../../components/CeremonyMap';
+
+class Ceremony extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  focusBgImage = (focus) => {
+    this.setState({ focusBgImage: focus });
+  }
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div
+          className={[
+            s.bgImage,
+            this.state.focusBgImage ? s.bgImageFocus : null,
+          ].join(' ')}
+        />
+        <div className={s.container}>
+          <div className={s.headings}>
+            <h1>All Saints&#8217; Church</h1>
+            <h2 className={s.subheading}>Church Lane<br />Kings Langley<br />WD4 8JS</h2>
+          </div>
+          <div className={s.content}>
+            <h3>When</h3>
+            <p>The Ceremony begins at 1pm</p>
+            <h3>Where</h3>
+            <p>The Church is located at the southern end of Kings Langley high street.
+              Parking is available across the road at the Rose and Crown pub
+              (Dan may be there before 1pm 😉).</p>
+            <div className={s.map}>
+              <CeremonyMap />
+            </div>
+            <h3>About the church</h3>
+            <p>All Saints Church is a medieval church with parts dating from the 13th century.
+              The main features of the body of the Church are the beautiful reredos, depicting
+              The Last Supper, and the fine Jacobean pulpit with its intricate carvings.
+              The Tower has a peal of 8 bells that are regularly rung before Services.</p>
+            <p>The church was chosen because it is Dan&#8217;s family church.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Ceremony);

src/routes/ceremony/index.js

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

src/routes/home/Home.css

@@ -23,7 +23,7 @@
 }
 
 .container {
-  padding-top: 5vh;
+  padding-top: 50px;
   margin: 0 20px;
 }
 

src/routes/home/index.js

@@ -9,7 +9,7 @@ export default {
   action() {
     return {
       title: 'Welcome',
-      component: <Layout><Home /></Layout>,
+      component: <Layout current="home"><Home /></Layout>,
     };
   },
 };

src/routes/index.js

@@ -9,6 +9,7 @@ export default {
   children: [
     require('./home').default,
     require('./rsvp').default,
+    require('./ceremony').default,
     require('./login').default,
     require('./admin').default,
     require('./adminPeople').default,

src/routes/notFound/NotFound.css

@@ -7,6 +7,6 @@
 
 .container {
   margin: 0 auto;
-  padding: 0 0 40px;
+  padding: 50px 0 40px;
   max-width: var(--max-content-width);
 }

src/routes/rsvp/index.js

@@ -38,7 +38,7 @@ export default {
     return {
       title,
       component: (
-        <Layout>
+        <Layout current="home">
           <Rsvp
             title={title}
             people={people}