custom roadblock

7 files changed, 119 insertions, 18 deletions

diff --git a/frontend/site/app.js b/frontend/site/app/index.js
index 2c72bf1..880c1bd 100644
--- a/frontend/site/app.js
+++ b/frontend/site/app/index.js
@@ -32,5 +32,3 @@ export default class App extends Component {
     )
   }
 }
-/*
-*/
diff --git a/frontend/site/app/roadblock.js b/frontend/site/app/roadblock.js
new file mode 100644
index 0000000..c9ec0b5
--- /dev/null
+++ b/frontend/site/app/roadblock.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import "./roadblock.css"
+
+export default function Roadblock ({ onClick, title }) {
+  return (
+    <div className='roadblock' onClick={onClick}>
+      <div>
+        <h2>{title}</h2>
+        <button>Enter</button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app/index.js
index 2506591..a0a6b76 100644
--- a/frontend/site/projects/museum/app.js
+++ b/frontend/site/projects/museum/app/index.js
@@ -4,16 +4,16 @@ import { Route } from 'react-router'
 import { connect } from 'react-redux'
 
 import ViewerContainer from 'site/viewer/viewer.container'
-import Home from './views/home'
-import Essay from './views/essay'
-import Artists from './views/artists'
-import Credits from './views/credits'
-import NavOverlay from './views/nav.overlay'
-import StlOverlay from './views/stl.overlay'
+import Home from 'site/projects/museum/views/home'
+import Essay from 'site/projects/museum/views/essay'
+import Artists from 'site/projects/museum/views/artists'
+import Credits from 'site/projects/museum/views/credits'
+import NavOverlay from 'site/projects/museum/views/nav.overlay'
+import StlOverlay from 'site/projects/museum/views/stl.overlay'
 
-import "./views/mobile.css"
+import "site/projects/museum/views/mobile.css"
 
-import { loadMuseum } from './museum.actions'
+import { loadMuseum } from 'site/projects/museum/museum.actions'
 
 class App extends Component {
   componentDidMount() {
diff --git a/frontend/site/projects/museum/app/roadblock.css b/frontend/site/projects/museum/app/roadblock.css
new file mode 100644
index 0000000..73102af
--- /dev/null
+++ b/frontend/site/projects/museum/app/roadblock.css
@@ -0,0 +1,36 @@
+.roadblock {
+  background: #111;
+  color: #ff790d;
+  position: absolute;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.roadblock-byline {
+  font-family: "Druk Wide";
+  opacity: 1;
+  white-space: nowrap;
+  transition: opacity 0.2s;
+  font-size: 4.2vh;
+  width: 100vw;
+  text-align: center;
+  line-height: 1.1;
+}
+.roadblock-title {
+  font-family: "Druk";
+  font-weight: 900;
+  font-style: italic;
+  white-space: nowrap;
+  font-size: 49vh;
+  text-align: center;
+  line-height: 0.7;
+  transition: top 0.2s cubic-bezier(0,0,0,1);
+}
+.roadblock-title span {
+  margin-left: -2vh;
+}
diff --git a/frontend/site/projects/museum/app/roadblock.js b/frontend/site/projects/museum/app/roadblock.js
new file mode 100644
index 0000000..6ce1e3f
--- /dev/null
+++ b/frontend/site/projects/museum/app/roadblock.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import './roadblock.css'
+
+export default function Roadblock ({ onClick }) {
+  return (
+    <div className='roadblock' onClick={onClick}>
+      <div className="roadblock-byline">KW PRESENTS</div>
+      <div className="roadblock-title">THE L<span>AST</span></div>
+      <div className="roadblock-title">MUSEUM</div>
+      <div className="roadblock-byline">ENTER SITE</div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/mobile.css b/frontend/site/projects/museum/views/mobile.css
index c9574ee..688fa2a 100644
--- a/frontend/site/projects/museum/views/mobile.css
+++ b/frontend/site/projects/museum/views/mobile.css
@@ -1,4 +1,14 @@
 @media only screen and (max-device-height: 500px) {
+  /* site container */
+  .container {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
   /* main nav */
   .page .home-link,
   .museum-nav .home-link {
@@ -59,6 +69,41 @@
   .page-artists .artist-location {
     bottom: 0.5rem;
   }
+  .page-artists .artist-left {
+    width: 100vw;
+    padding-left: 5rem;
+    padding-right: 5rem;
+    font-size: 1.1rem;
+    line-height: 1.4;
+  }
+  .page-artists .artist-right {
+    width: 100vw;
+    left: 0;
+    opacity: 0.25;
+  }
+  .page-artists .artist-location {
+    bottom: 0;
+    background: #111111;
+    padding: 0.75rem;
+    margin: 0;
+  }
+
+  /* essay */
+  .page-essay .page-content {
+    width: 100vw;
+    padding: 0 5rem;
+    margin: 0;
+  }
+  .page-essay.page-artists .artist-location {
+    bottom: 0;
+    padding: 0.75rem 0;
+  }
+  .page-essay p {
+    font-size: 1.1rem;
+  }
+  .page-essay.page-artists .page-title {
+    margin: 1rem 0;
+  }
 
   /* charles */
   .charles-text {
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 3138a5a..d536ac5 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -7,6 +7,7 @@ import { history } from 'site/store'
 import actions from 'site/actions'
 import { Loader } from 'app/common/loader.component'
 import TileHandle from 'app/views/tile/components/tile.handle'
+import Roadblock from '../APP_TARGET/roadblock'
 
 import 'app/views/page/page.css'
 
@@ -253,14 +254,7 @@ class ViewerContainer extends Component {
   
   renderRoadblock() {
     const { title } = this.props.graph
-    return (
-      <div className='roadblock' onClick={this.removeRoadblock}>
-        <div>
-          <h2>{title}</h2>
-          <button>Enter</button>
-        </div>
-      </div>
-    )
+    return <Roadblock onClick={this.removeRoadblock} title={title} />
   }
 }