custom roadblock

3 files changed, 101 insertions, 0 deletions

diff --git a/frontend/site/projects/museum/app/index.js b/frontend/site/projects/museum/app/index.js
new file mode 100644
index 0000000..a0a6b76
--- /dev/null
+++ b/frontend/site/projects/museum/app/index.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { ConnectedRouter } from 'connected-react-router'
+import { Route } from 'react-router'
+import { connect } from 'react-redux'
+
+import ViewerContainer from 'site/viewer/viewer.container'
+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 "site/projects/museum/views/mobile.css"
+
+import { loadMuseum } from 'site/projects/museum/museum.actions'
+
+class App extends Component {
+  componentDidMount() {
+    loadMuseum()
+  }
+  
+  render() {
+    if (!this.props.ready) {
+      return <div />
+    }
+    return (
+      <ConnectedRouter history={this.props.history}>
+        <div className='app'>
+          <Route path={'/last-museum/:page_name'} component={ViewerContainer} exact />
+          <Route path={'/last-museum/start'} component={Home} exact />
+          <Route path={'/last-museum/essay'} component={Essay} exact />
+          <Route path={'/last-museum/artists'} component={Artists} exact />
+          <Route path={'/last-museum/credits'} component={Credits} exact />
+          <Route path={'/last-museum/:page_name'} component={StlOverlay} exact />
+          <Route path={'/last-museum/:page_name'} component={NavOverlay} exact />
+          <Route path='/last-museum/' exact render={() => {
+            setTimeout(() => this.props.history.push('/last-museum/start'), 10)
+            return null
+          }} />
+        </div>
+      </ConnectedRouter>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  ready: state.site.ready,
+})
+
+export default connect(mapStateToProps)(App)
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