From 4776ec58c3076ef71de34fefee110c8004aa4308 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Mon, 1 Jan 2018 12:03:56 +0100
Subject: [PATCH] :sparkles: Site > Demo > Add labels

---
 site/index.html             |  8 ++++++--
 site/src/javascript/Demo.js |  2 +-
 site/src/style/header.styl  | 20 ++++++++++++++++++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/site/index.html b/site/index.html
index c77d49f..906831f 100644
--- a/site/index.html
+++ b/site/index.html
@@ -91,11 +91,15 @@
                 </div>
 
                 <div class="speaker js-speaker">
-                    <div class="icon"></div>
+                    <div class="icon">
+                        <div class="label">Speaker</div>
+                    </div>
                 </div>
 
                 <div class="audience js-audience">
-                    <div class="icon"></div>
+                    <div class="icon">
+                        <div class="label">Audience</div>
+                    </div>
                     <div class="white-cache"></div>
                     <div class="url-bar"></div>
                 </div>
diff --git a/site/src/javascript/Demo.js b/site/src/javascript/Demo.js
index b4ade8d..f3b015e 100644
--- a/site/src/javascript/Demo.js
+++ b/site/src/javascript/Demo.js
@@ -77,7 +77,7 @@ export default class Demo
             this.goStep(4)
         }
 
-        if(this.speakerCurrentTime < 17.5 && this.$speakerVideo.currentTime >= 17.5)
+        if(this.speakerCurrentTime < 17.25 && this.$speakerVideo.currentTime >= 17.25)
         {
             this.goStep(5)
         }
diff --git a/site/src/style/header.styl b/site/src/style/header.styl
index a239493..b1b192e 100644
--- a/site/src/style/header.styl
+++ b/site/src/style/header.styl
@@ -92,7 +92,7 @@ section.header
 
     .demo
         position absolute
-        top 520px
+        top 505px
         left 50%
 
         .speaker
@@ -116,6 +116,14 @@ section.header
                 background-repeat no-repeat
                 background-position center center
 
+                .label
+                    position absolute
+                    top calc(100% + 6px)
+                    left -50px
+                    right -50px
+                    white-space nowrap
+                    text-align center
+
         .audience
             position absolute
             top -150px
@@ -138,6 +146,14 @@ section.header
                 background-repeat no-repeat
                 background-position center center
 
+                .label
+                    position absolute
+                    top calc(100% + 6px)
+                    left -50px
+                    right -50px
+                    white-space nowrap
+                    text-align center
+
             .url-bar
                 position absolute
                 top 1.5%
@@ -173,7 +189,7 @@ section.header
             top 0
             left 0
             opacity 0
-            transition opacity 0.5s
+            transition opacity 0.25s
             will-change opacity
 
             .bar