3 files changed, 27 insertions, 8 deletions
diff --git a/frontend/site/projects/museum/views/artists.css b/frontend/site/projects/museum/views/artists.css
index a98d619..929c10f 100644
--- a/frontend/site/projects/museum/views/artists.css
+++ b/frontend/site/projects/museum/views/artists.css
@@ -105,7 +105,7 @@
   padding-bottom: 4vh;
   padding-left: 2vw;
   padding-right: 2vw;
-  width: 50vw;
+  width: 100vw;
   font-size: 1.5vw;
   line-height: 1.4;
 }
@@ -120,7 +120,7 @@
   background-position: center right;
   width: 50vw;
   height: 100vh;
-  background: #222222;
+  /*background: #222222;*/
   pointer-events: none;
 }
 .page-artists .artist-location {
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index c9bd36e..cb21046 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -21,7 +21,7 @@
   width: 100%;
   height: 5rem;
   /*color: black;*/
-  color: white;
+  color: rgba(255, 121, 13, 1.0);
 }
 .footer-gradient {
   position: absolute;
@@ -48,7 +48,7 @@
 .nav-arrow path {
   fill: transparent;
 
-  stroke: white;
+  stroke: rgba(255, 121, 13, 1.0);
   stroke-width: 2px;
 }
 .nav-arrow.arrow-left {
@@ -64,7 +64,7 @@
   width: 100%;
   white-space: nowrap;
   text-align: center;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.75rem;
   transition: transform 0.15s;
   transform: translateY(3rem);
 }
@@ -86,10 +86,18 @@
   user-select: none;
 }
 
+.footer.with-artist.instant .footer-gradient,
+.footer.with-artist.instant .nav-arrow,
+.footer.with-artist.instant .artist-desc {
+  transition: transform 0s;
+}
+.footer.with-artist.visible .nav-arrow,
+.footer.with-artist.visible .artist-desc,
 .footer.with-artist:hover .nav-arrow,
 .footer.with-artist:hover .artist-desc {
   transform: translateY(0);
 }
+.footer.with-artist.visible .footer-gradient,
 .footer.with-artist:hover .footer-gradient {
   transform: translateY(0);
 }
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index bd7812e..8c0a356 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -22,6 +22,7 @@ export default class NavOverlay extends Component {
 
   constructor(props) {
     super(props)
+    this.footerRef = React.createRef()
     this.previousArtist = this.previousArtist.bind(this)
     this.nextArtist = this.nextArtist.bind(this)
     this.goHome = this.goHome.bind(this)
@@ -62,6 +63,7 @@ export default class NavOverlay extends Component {
       })
     }
     else if (pathkey in ARTISTS) {
+      const shouldShowFooter = this.state.currentArtist !== pathkey
       this.setState({
         showHome: true,
         showFooter: true,
@@ -69,7 +71,7 @@ export default class NavOverlay extends Component {
         showCounter: pathkey === 'nilthamrong',
         currentArtist: pathkey,
         artist: ARTISTS[pathkey],
-      })
+      }, () => shouldShowFooter && this.quicklyShowFooter())
     } else {
       this.setState({
         showHome: false,
@@ -82,6 +84,15 @@ export default class NavOverlay extends Component {
     }
   }
 
+  quicklyShowFooter() {
+    clearTimeout(this.footerTimeout)
+    // this.footerRef.current.classList.add("instant")
+    this.footerRef.current.classList.add("visible")
+    this.footerTimeout = setTimeout(() => {
+      this.footerRef.current.classList.remove("visible")
+    }, 5000)
+  }
+
   previousArtist() {
     this.go(-1)
   }
@@ -116,7 +127,7 @@ export default class NavOverlay extends Component {
         {showCounter && <Counter />}
         {showFooter && (
           showArtist ? (
-            <div className="footer with-artist">
+            <div className="footer with-artist" ref={this.footerRef}>
               <div className="footer-gradient" />
               <div className="artist-desc">
                 <span className="artist-name">{artist.name}</span>
@@ -126,7 +137,7 @@ export default class NavOverlay extends Component {
               <div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
             </div>
           ) : (
-            <div className="footer no-artist" />
+            <div className="footer no-artist" ref={this.footerRef} />
           )
         )}
         <TextOverlay location={this.props.location} match={this.props.match} />