Basic presenter mode working

3 files changed, 62 insertions, 22 deletions

diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss
index b301396..265b77e 100644
--- a/theme/sass/_base.scss
+++ b/theme/sass/_base.scss
@@ -48,8 +48,7 @@ body {
   margin: 0;
   padding: 0;
 
-  //display: block !important;
-  opacity: 1 !important;
+  opacity: 0;
 
   height: 100%;
   min-height: 740px;
@@ -59,7 +58,11 @@ body {
 
   color: #fff;
   @include font-smoothing(antialiased);
-  @include transition(opacity 800ms ease-in);
+  @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank.
+
+  &.loaded {
+    opacity: 1;
+  }
 }
 
 slides > slide[hidden] {
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index c7b4eab..c0d9eb8 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -85,10 +85,6 @@ $article-content-top-padding: 45px;
 }
 
 body {
-  //@include background-image(radial-gradient(50% 50%, #b1dfff 0%,
-  //                                          $brand-blue-secondary2 600px));
-  //background-attachment: fixed;
-  //@include background(linear-gradient(white, white 85%, $gray-1));
   background: black;
 }
 
@@ -635,36 +631,77 @@ article.smaller {
 
 // Speaker notes only show the current slide.
 .with-notes {
+
+  slides.layout-widescreen,
+  slides.layout-faux-widescreen {
+    slide {
+      &.next {
+        @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35));
+      }
+      .note {
+        @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5));
+      }
+    }
+  }
+
+  slide {
+    overflow: visible;
+    background: white;
+    @include transition(none); // No slide transition goodies when in presenter mode.
+    pointer-events: none;
+    @include transform-origin(0, 0); // For speaker note transition.
+
+    &:not(.backdrop) {
+      @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0));
+      @include box-shadow(0 0 10px $gray-3);
+    }
+
+    &.backdrop {
+      //@include background(linear-gradient($gray-1, white 30%, white 60%, $gray-1));
+      @include background-image(radial-gradient(50% 50%, #b1dfff 0%,
+                                                $brand-blue 600px));
+    }
+
+    &.next {
+      @include transform(translate3d($slide-width / 2 + 120, 80px, 0) scale(0.35));
+      opacity: 1 !important;
+
+      .note {
+        display: none; // Prevents seeing notes if we go to previous slide.
+      }
+    }
+  }
   .note {
     opacity: 1;
-    @include transform(translateY(0));
-    pointer-events: auto;
+    pointer-events: auto; // Allow people to do things like open links embedded in the speaker notes.
   }
 }
 
 .note {
   position: absolute;
   z-index: 100;
-  width: 100%;
-  height: 100%;
+  width: 109%;
+  height: $slide-height / 2 - 90;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.3);
-  opacity: 0;
+  background: $gray-1;
   pointer-events: none;
-  @include flexbox;
-  @include flex-center-center;
   @include border-radius($slide-border-radius);
 
-  @include transform(translateY($slide-height / 2));
-  @include transition(all 0.4s ease-in-out);
+  @include box-sizing(border-box);
+  @include box-shadow(0 0 10px $gray-3);
+
+  @include transform(translate3d(250px, $slide-height + 100, 0) scale(1.5));
+  @include transition(opacity 400ms ease-in-out);
 
   > section {
     background: #fff;
     @include border-radius($slide-border-radius);
-    @include box-shadow(0 0 10px $gray-3);
-    width: 60%;
-    padding: 2em;
+    height: 100%;
+    width: 100%;
+    @include box-sizing(border-box);
+    overflow: auto;
+    padding: 1em;
   }
 }
 
diff --git a/theme/sass/phone.scss b/theme/sass/phone.scss
index 4cfb2b1..c6a4043 100644
--- a/theme/sass/phone.scss
+++ b/theme/sass/phone.scss
@@ -11,8 +11,8 @@ and (max-width : 480px) {
 /* Smartphones (portrait) ----------- */
 //@media only screen and (max-device-width: 480px) {
 /* Styles */
-$slide-width: 350px;
-$slide-height: 500px;
+//$slide-width: 350px;
+//$slide-height: 500px;
 
 slides > slide {
 /*  width: $slide-width !important;