homepage css

4 files changed, 93 insertions, 23 deletions

diff --git a/README.md b/README.md
index c1411c8..5f3fa7a 100644
--- a/README.md
+++ b/README.md
@@ -60,19 +60,10 @@ To programmatically create pages, modify `cli/commands/site/populate.py`
 If the functionality of the live site needs to change, make a new router and go from there. See `frontend/site/projects/museum/app.js` for an example.
 
 ```
-# Building the museum site (development)
+# Building the Last Museum site (development)
 yarn build:museum:dev
 
-# Building the museum site (production)
+# Deploying the Last Museum site (production)
 yarn build:museum:production
-rsync -rlptuvz ./exports/last-museum/ lens@garden:swimmer/data_store/exports/last-museum/
-```
-
-## Deploying a site
-
-A hypothetical rsync command:
-
-```
-cd data_store/exports/
-rsync -rlptuvz ./last-museum/ lens@garden:swimmer/data_store/exports/last-museum/
+rsync -rlptuvz ./data_store/exports/last-museum/ lens@garden:swimmer/data_store/exports/last-museum/
 ```
diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css
index aab5d0c..84f157d 100644
--- a/frontend/site/projects/museum/views/home.css
+++ b/frontend/site/projects/museum/views/home.css
@@ -1,9 +1,18 @@
-.roadblock {
-  /*display: none !important;*/
+.app > div.home {
+  display: block;
+  background: black;
+  transition: opacity 0.4s;
+  opacity: 1.0;
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
 }
-
-
-.home {
+.app > div.home.hidden {
+  opacity: 0.0;
+  pointer-events: none;
 }
 
 .home-byline {
@@ -11,7 +20,11 @@
   color: #FF790D;
   text-shadow: 0px 0px 5px #FF790D;
   opacity: 1;
-  transition: opacity 0.5s;
+  transition: opacity 0.2s;
+  font-size: 2.2vh;
+  width: 100vw;
+  text-align: center;
+  position: absolute;
 }
 .home-title {
   font-family: "Druk";
@@ -19,36 +32,77 @@
   font-style: italic;
   color: #FF790D;
   text-shadow: 0px 0px 10px #FF790D;
+  font-size: 49vh;
+  position: absolute;
+  left: 0;
+  width: 100vw;
+  text-align: center;
+  line-height: 0.9;
+  transition: top 0.2s cubic-bezier(0,0,0,1);
 }
 .home-artists {
   font-family: "Druk Wide";
   color: #FF790D;
   text-shadow: 0px 0px 5px #FF790D;
   opacity: 1;
-  transition: opacity 0.5s;
+  transition: opacity 0.2s;
+  width: 50vw;
+  font-size: 3vh;
+  position: absolute;
+  text-align: center;
+  bottom: 6vh;
+}
+.home-message {
+  font-family: "Druk Wide";
+  color: #FF790D;
+  text-shadow: 0px 0px 5px #ff790d;
+  opacity: 0.0;
+  transition: opacity 0.2s;
+  width: 140vh;
+  font-size: 4vh;
+  line-height: 1.2;
+  position: absolute;
+  top: 40vh;
+  text-align: center;
+  left: 50%;
+  transform: translate3D(-50%, 0, 0);
+}
+.home.open .home-message {
+  opacity: 1.0;
 }
 
 .home-title.title-1 {
+  top: 2vh;
+}
+.home-title.title-1 span {
+  margin-left: -2vh;
 }
 .home-title.title-2 {
+  top: 40vh;
 }
 .home.open .home-title.title-1 {
+  top: -1vh;
 }
 .home.open .home-title.title-2 {
+  top: 58vh;
 }
 
 .home.open .home-artists {
   opacity: 0;
-  transition: opacity 0.5s;
+  transition: opacity 0.2s;
 }
 .artists-left {
+  left: 0;
 }
 .artists-right {
+  left: 50vw;
 }
 
 .byline-top {
+  top: 1vh; left: 0;
 }
 .byline-bottom {
+  bottom: 2vh; left: 0;
 }
 .home.open .home-byline {
   opacity: 0;
diff --git a/frontend/site/projects/museum/views/home.js b/frontend/site/projects/museum/views/home.js
index cfd0d40..e3c44d5 100644
--- a/frontend/site/projects/museum/views/home.js
+++ b/frontend/site/projects/museum/views/home.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-// import actions from 'site/actions'
+import actions from 'site/actions'
 
 import "./home.css"
 
@@ -9,11 +9,32 @@ export default class Home extends Component {
     open: false,
   }
 
+  constructor(props) {
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  componentDidMount() {
+    const roadblock = document.querySelector('.roadblock')
+    if (roadblock) roadblock.style.display = "none"
+  }
+
+  handleClick(e) {
+    e && e.preventDefault()
+    if (this.state.open) {
+      actions.site.interact()
+      this.setState({ hidden: true })
+    }
+    else {
+      this.setState({ open: true })
+    }
+  }
+
   render() {
     return (
-      <div className={this.state.open ? "home open" : "home"}>
+      <div className={this.state.hidden ? "home hidden open" : this.state.open ? "home open" : "home"} onClick={this.handleClick}>
         <div className="home-byline byline-top">KW PRESENTS</div>
-        <div className="home-title title-1">THE LAST</div>
+        <div className="home-title title-1">THE L<span>AST</span></div>
         <div className="home-title title-2">MUSEUM</div>
         <div className="home-artists artists-left">
           NICOLE FORESHEW<br />
@@ -26,6 +47,9 @@ export default class Home extends Component {
           ZOHRA OPOKO
         </div>
         <div className="home-byline byline-bottom">CURATED BY NADIM SAMMAN</div>
+        <div className="home-message">
+          Lorem ipsum dolor sit amet, pro ea errem nonumes, gubergren deterruisset sit eu. Quo nostrud definitiones ex, sea dicant accommodare ei, te vix habeo minim voluptatum.
+        </div>
       </div>
     )
   }
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 7d8a71b..8c2715e 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -57,6 +57,7 @@ class ViewerContainer extends Component {
     //   this.setState({ unloaded: true })
     //   return
     // }
+    console.log(this.props.interactive)
     const page = pages[page_path] || pages[home_page]
     if (!this.props.interactive && hasAutoplay(page)) {
       this.setState({ page, popups: {}, hidden: {}, roadblock: true, unloaded: false })