From a66bc1cedcd01c974f40f8e552d3b4bdff24539a Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Mon, 6 Mar 2017 23:39:09 +0000
Subject: [PATCH] Add less transparent bg to scrolled nav Reposition the
 background images

---
 package.json                             |  2 +-
 src/components/Layout/Layout.css         |  4 ++++
 src/components/Navigation/Navigation.css |  8 ++++++-
 src/components/Navigation/Navigation.js  | 30 +++++++++++++++++++++++-
 src/routes/accomodation/Accomodation.css |  1 +
 src/routes/ceremony/Ceremony.css         |  1 +
 src/routes/home/Home.css                 |  1 +
 src/routes/reception/Reception.css       |  1 +
 src/routes/rsvp/Rsvp.css                 |  1 +
 src/routes/transport/Transport.css       |  1 +
 10 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 575493a..dabf35e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wedding",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "engines": {
     "node": ">=6.5",
diff --git a/src/components/Layout/Layout.css b/src/components/Layout/Layout.css
index 0fe50f6..f408ed7 100644
--- a/src/components/Layout/Layout.css
+++ b/src/components/Layout/Layout.css
@@ -13,6 +13,10 @@ html {
   line-height: 1.375; /* ~22px */
 }
 
+body {
+  overflow-x: hidden;
+}
+
 a {
   color: #0074c2;
 }
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
index fc98489..18c78bc 100644
--- a/src/components/Navigation/Navigation.css
+++ b/src/components/Navigation/Navigation.css
@@ -4,8 +4,14 @@
   right: 0;
   left: 0;
   height: 40px;
-  background: rgba(0, 0, 0, 0.1);
   overflow: hidden;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.1);
+  transition: background 0.3s, ease-in;
+}
+
+.navDark {
+  background: rgba(60, 60, 60, 0.95);
 }
 
 .container {
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index ca271ad..0c26dd4 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -8,12 +8,40 @@ class Navigation extends React.Component {
     current: PropTypes.string,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      scrollAtTop: true,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = (event) => {
+    const scrollTop = event.srcElement.body.scrollTop;
+    this.setState({
+      scrollAtTop: scrollTop < 10,
+    });
+  };
+
   render() {
     if (!this.props.current) {
       return null;
     }
     return (
-      <div className={s.root} role="navigation">
+      <div
+        className={[
+          s.root,
+          this.state.scrollAtTop ? null : s.navDark,
+        ].join(' ')}
+        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="/church">Church</Link>
diff --git a/src/routes/accomodation/Accomodation.css b/src/routes/accomodation/Accomodation.css
index ede0ee9..05724b8 100644
--- a/src/routes/accomodation/Accomodation.css
+++ b/src/routes/accomodation/Accomodation.css
@@ -12,6 +12,7 @@
   background: url('/img/offley_2560.jpg');
   background-size: cover;
   background-position-x: 54%;
+  background-position-y: 66%;
   background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.4);
   z-index: -1;
diff --git a/src/routes/ceremony/Ceremony.css b/src/routes/ceremony/Ceremony.css
index fb89a9d..a6b9773 100644
--- a/src/routes/ceremony/Ceremony.css
+++ b/src/routes/ceremony/Ceremony.css
@@ -12,6 +12,7 @@
   background: url('/img/church_2560.jpg');
   background-size: cover;
   background-position-x: 54%;
+  background-position-y: 66%;
   background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.4);
   z-index: -1;
diff --git a/src/routes/home/Home.css b/src/routes/home/Home.css
index b74bd91..ad8e1f3 100644
--- a/src/routes/home/Home.css
+++ b/src/routes/home/Home.css
@@ -12,6 +12,7 @@
   background: url('/img/prague_2560.jpg');
   background-size: cover;
   background-position-x: 54%;
+  background-position-y: 66%;
   background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.6);
   z-index: -1;
diff --git a/src/routes/reception/Reception.css b/src/routes/reception/Reception.css
index be37a4e..1ea2c81 100644
--- a/src/routes/reception/Reception.css
+++ b/src/routes/reception/Reception.css
@@ -12,6 +12,7 @@
   background: url('/img/offley_2560.jpg');
   background-size: cover;
   background-position-x: 54%;
+  background-position-y: 66%;
   background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.4);
   z-index: -1;
diff --git a/src/routes/rsvp/Rsvp.css b/src/routes/rsvp/Rsvp.css
index 3ed53bc..da7536b 100644
--- a/src/routes/rsvp/Rsvp.css
+++ b/src/routes/rsvp/Rsvp.css
@@ -12,6 +12,7 @@
   background: url('/img/cervenalhota_2560.jpg');
   background-size: cover;
   background-position-x: 30%;
+  background-position-y: 66%;
   background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.6);
   z-index: -1;
diff --git a/src/routes/transport/Transport.css b/src/routes/transport/Transport.css
index 9e6c082..5665593 100644
--- a/src/routes/transport/Transport.css
+++ b/src/routes/transport/Transport.css
@@ -12,6 +12,7 @@
   background: url('/img/offley_2560.jpg');
   background-size: cover;
   background-position-x: 54%;
+  background-position-y: 66%;
   background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.4);
   z-index: -1;