From 64c8d6328a9d0e4fe68a5899e3e8710342f3b7dd Mon Sep 17 00:00:00 2001
From: Eric Bidelman
Date: Tue, 17 Apr 2012 18:59:07 -0700
Subject: Basic presenter mode working

---
 theme/css/default.css   | 416 +++++++++++++++++++++++++++---------------------
 theme/sass/_base.scss   |   9 +-
 theme/sass/default.scss |  71 +++++++--
 theme/sass/phone.scss   |   4 +-
 4 files changed, 298 insertions(+), 202 deletions(-)

(limited to 'theme')

diff --git a/theme/css/default.css b/theme/css/default.css
index 7c96455..92b9dbe 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -76,7 +76,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  opacity: 1 !important;
+  opacity: 0;
   height: 100%;
   min-height: 740px;
   width: 100%;
@@ -86,19 +86,23 @@ body {
   -moz-font-smoothing: antialiased;
   -ms-font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
-  -webkit-transition: opacity 800ms ease-in;
-  -moz-transition: opacity 800ms ease-in;
-  -ms-transition: opacity 800ms ease-in;
-  -o-transition: opacity 800ms ease-in;
-  transition: opacity 800ms ease-in;
+  -webkit-transition: opacity 800ms ease-in 100ms;
+  -moz-transition: opacity 800ms ease-in 100ms;
+  -ms-transition: opacity 800ms ease-in 100ms;
+  -o-transition: opacity 800ms ease-in 100ms;
+  transition: opacity 800ms ease-in 100ms;
+}
+/* line 63, ../sass/_base.scss */
+body.loaded {
+  opacity: 1;
 }
 
-/* line 65, ../sass/_base.scss */
+/* line 68, ../sass/_base.scss */
 slides > slide[hidden] {
   display: none !important;
 }
 
-/* line 69, ../sass/_base.scss */
+/* line 72, ../sass/_base.scss */
 slides {
   width: 100%;
   height: 100%;
@@ -116,7 +120,7 @@ slides {
   transform-style: preserve-3d;
 }
 
-/* line 80, ../sass/_base.scss */
+/* line 83, ../sass/_base.scss */
 slides > slide {
   display: block;
   position: absolute;
@@ -217,7 +221,7 @@ body {
   background: black;
 }
 
-/* line 95, ../sass/default.scss */
+/* line 91, ../sass/default.scss */
 slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
@@ -239,46 +243,46 @@ slides > slide {
   -o-transition: all 0.6s ease-in-out;
   transition: all 0.6s ease-in-out;
 }
-/* line 116, ../sass/default.scss */
+/* line 112, ../sass/default.scss */
 slides > slide.far-past {
   display: none;
 }
-/* line 123, ../sass/default.scss */
+/* line 119, ../sass/default.scss */
 slides > slide.past {
   display: block;
   opacity: 0;
 }
-/* line 130, ../sass/default.scss */
+/* line 126, ../sass/default.scss */
 slides > slide.current {
   display: block;
   opacity: 1;
 }
-/* line 136, ../sass/default.scss */
+/* line 132, ../sass/default.scss */
 slides > slide.current .auto-fadein {
   opacity: 1;
 }
-/* line 140, ../sass/default.scss */
+/* line 136, ../sass/default.scss */
 slides > slide.current .gdbar {
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
 }
-/* line 145, ../sass/default.scss */
+/* line 141, ../sass/default.scss */
 slides > slide.next {
   display: block;
   opacity: 0;
   pointer-events: none;
 }
-/* line 153, ../sass/default.scss */
+/* line 149, ../sass/default.scss */
 slides > slide.far-next {
   display: none;
 }
-/* line 160, ../sass/default.scss */
+/* line 156, ../sass/default.scss */
 slides > slide.dark {
   background: #515151;
 }
-/* line 168, ../sass/default.scss */
+/* line 164, ../sass/default.scss */
 slides > slide:not(.nobackground):before {
   font-size: 12pt;
   content: "#io2012";
@@ -294,7 +298,7 @@ slides > slide:not(.nobackground):before {
   height: 30px;
   line-height: 1.9;
 }
-/* line 180, ../sass/default.scss */
+/* line 176, ../sass/default.scss */
 slides > slide:not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
@@ -303,7 +307,7 @@ slides > slide:not(.nobackground):after {
   right: 60px;
   line-height: 1.9;
 }
-/* line 191, ../sass/default.scss */
+/* line 187, ../sass/default.scss */
 slides > slide.title-slide:after {
   content: '';
   background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
@@ -317,7 +321,7 @@ slides > slide.title-slide:after {
   width: 100%;
   height: 60px;
 }
-/* line 203, ../sass/default.scss */
+/* line 199, ../sass/default.scss */
 slides > slide.backdrop {
   z-index: -10;
   display: block !important;
@@ -329,39 +333,39 @@ slides > slide.backdrop {
   background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
   background-color: white;
 }
-/* line 209, ../sass/default.scss */
+/* line 205, ../sass/default.scss */
 slides > slide.backdrop:after, slides > slide.backdrop:before {
   display: none;
 }
-/* line 214, ../sass/default.scss */
+/* line 210, ../sass/default.scss */
 slides > slide > hgroup + article {
   margin-top: 45px;
 }
-/* line 217, ../sass/default.scss */
+/* line 213, ../sass/default.scss */
 slides > slide > hgroup + article p {
   margin-bottom: 1em;
 }
-/* line 222, ../sass/default.scss */
+/* line 218, ../sass/default.scss */
 slides > slide > article:only-child {
   height: 100%;
 }
-/* line 225, ../sass/default.scss */
+/* line 221, ../sass/default.scss */
 slides > slide > article:only-child > iframe {
   height: 100%;
 }
 
-/* line 231, ../sass/default.scss */
+/* line 227, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   padding: 40px 160px;
 }
 
-/* line 240, ../sass/default.scss */
+/* line 236, ../sass/default.scss */
 slides.layout-widescreen > slide,
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
-/* line 245, ../sass/default.scss */
+/* line 241, ../sass/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
@@ -377,26 +381,26 @@ slides.layout-faux-widescreen > slide.far-past {
   -o-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }
-/* line 252, ../sass/default.scss */
+/* line 248, ../sass/default.scss */
 slides.layout-widescreen > slide.past,
 slides.layout-faux-widescreen > slide.past {
   display: block;
   opacity: 0;
 }
-/* line 259, ../sass/default.scss */
+/* line 255, ../sass/default.scss */
 slides.layout-widescreen > slide.current,
 slides.layout-faux-widescreen > slide.current {
   display: block;
   opacity: 1;
 }
-/* line 266, ../sass/default.scss */
+/* line 262, ../sass/default.scss */
 slides.layout-widescreen > slide.next,
 slides.layout-faux-widescreen > slide.next {
   display: block;
   opacity: 0;
   pointer-events: none;
 }
-/* line 274, ../sass/default.scss */
+/* line 270, ../sass/default.scss */
 slides.layout-widescreen > slide.far-next,
 slides.layout-faux-widescreen > slide.far-next {
   display: block;
@@ -412,39 +416,39 @@ slides.layout-faux-widescreen > slide.far-next {
   -o-transform: translate3d(2260px, 0, 0);
   transform: translate3d(2260px, 0, 0);
 }
-/* line 281, ../sass/default.scss */
+/* line 277, ../sass/default.scss */
 slides.layout-widescreen #prev-slide-area,
 slides.layout-faux-widescreen #prev-slide-area {
   margin-left: -650px;
 }
-/* line 285, ../sass/default.scss */
+/* line 281, ../sass/default.scss */
 slides.layout-widescreen #next-slide-area,
 slides.layout-faux-widescreen #next-slide-area {
   margin-left: 550px;
 }
 
-/* line 290, ../sass/default.scss */
+/* line 286, ../sass/default.scss */
 b {
   font-weight: 600;
 }
 
-/* line 294, ../sass/default.scss */
+/* line 290, ../sass/default.scss */
 a {
   color: #2a7cdf;
   text-decoration: none;
   border-bottom: 1px solid rgba(42, 124, 223, 0.5);
 }
-/* line 299, ../sass/default.scss */
+/* line 295, ../sass/default.scss */
 a:hover {
   color: black !important;
 }
 
-/* line 304, ../sass/default.scss */
+/* line 300, ../sass/default.scss */
 h1, h2, h3 {
   font-weight: 600;
 }
 
-/* line 308, ../sass/default.scss */
+/* line 304, ../sass/default.scss */
 h2 {
   font-size: 45px;
   line-height: 45px;
@@ -452,7 +456,7 @@ h2 {
   color: #515151;
 }
 
-/* line 315, ../sass/default.scss */
+/* line 311, ../sass/default.scss */
 h3 {
   font-size: 30px;
   letter-spacing: -1px;
@@ -461,39 +465,39 @@ h3 {
   color: #797979;
 }
 
-/* line 323, ../sass/default.scss */
+/* line 319, ../sass/default.scss */
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
   position: relative;
 }
-/* line 328, ../sass/default.scss */
+/* line 324, ../sass/default.scss */
 ul li {
   margin-bottom: 0.5em;
 }
-/* line 331, ../sass/default.scss */
+/* line 327, ../sass/default.scss */
 ul li ul {
   margin-left: 2em;
   margin-bottom: 0;
 }
-/* line 335, ../sass/default.scss */
+/* line 331, ../sass/default.scss */
 ul li ul li:before {
   content: '-';
   font-weight: 600;
 }
-/* line 342, ../sass/default.scss */
+/* line 338, ../sass/default.scss */
 ul > li:before {
   content: '·';
   margin-left: -1em;
   position: absolute;
   font-weight: 600;
 }
-/* line 349, ../sass/default.scss */
+/* line 345, ../sass/default.scss */
 ul ul {
   margin-top: .5em;
 }
 
-/* line 356, ../sass/default.scss */
+/* line 352, ../sass/default.scss */
 .highlight-code slide.current pre > * {
   opacity: 0.25;
   -webkit-transition: opacity 0.5s ease-in;
@@ -502,12 +506,12 @@ ul ul {
   -o-transition: opacity 0.5s ease-in;
   transition: opacity 0.5s ease-in;
 }
-/* line 360, ../sass/default.scss */
+/* line 356, ../sass/default.scss */
 .highlight-code slide.current b {
   opacity: 1;
 }
 
-/* line 365, ../sass/default.scss */
+/* line 361, ../sass/default.scss */
 pre {
   font-family: 'Inconsolata', 'Courier New', monospace;
   font-size: 20px;
@@ -524,7 +528,7 @@ pre {
   box-sizing: border-box;
   /*overflow: hidden;*/
 }
-/* line 379, ../sass/default.scss */
+/* line 375, ../sass/default.scss */
 pre:after {
   content: attr(data-lang);
   background-color: #a9a9a9;
@@ -537,14 +541,14 @@ pre:after {
   text-transform: uppercase;
 }
 
-/* line 392, ../sass/default.scss */
+/* line 388, ../sass/default.scss */
 code {
   font-size: 95%;
   font-family: 'Inconsolata', 'Courier New', monospace;
   color: black;
 }
 
-/* line 398, ../sass/default.scss */
+/* line 394, ../sass/default.scss */
 iframe {
   width: 100%;
   height: 530px;
@@ -555,12 +559,12 @@ iframe {
   box-sizing: border-box;
 }
 
-/* line 406, ../sass/default.scss */
+/* line 402, ../sass/default.scss */
 dt {
   font-weight: bold;
 }
 
-/* line 410, ../sass/default.scss */
+/* line 406, ../sass/default.scss */
 button {
   display: inline-block;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));
@@ -586,12 +590,12 @@ button {
   font-size: 10pt;
 }
 
-/* line 424, ../sass/default.scss */
+/* line 420, ../sass/default.scss */
 button:not(:disabled):hover {
   border-color: #515151;
 }
 
-/* line 428, ../sass/default.scss */
+/* line 424, ../sass/default.scss */
 button:not(:disabled):active {
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));
   background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
@@ -601,102 +605,102 @@ button:not(:disabled):active {
   background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
 }
 
-/* line 432, ../sass/default.scss */
+/* line 428, ../sass/default.scss */
 :disabled {
   color: #a9a9a9;
 }
 
-/* line 436, ../sass/default.scss */
+/* line 432, ../sass/default.scss */
 .blue {
   color: #4387fd;
 }
 
-/* line 439, ../sass/default.scss */
+/* line 435, ../sass/default.scss */
 .blue2 {
   color: #3c8ef3;
 }
 
-/* line 442, ../sass/default.scss */
+/* line 438, ../sass/default.scss */
 .blue3 {
   color: #2a7cdf;
 }
 
-/* line 445, ../sass/default.scss */
+/* line 441, ../sass/default.scss */
 .yellow {
   color: #ffd14d;
 }
 
-/* line 448, ../sass/default.scss */
+/* line 444, ../sass/default.scss */
 .yellow2 {
   color: #f9cc46;
 }
 
-/* line 451, ../sass/default.scss */
+/* line 447, ../sass/default.scss */
 .yellow3 {
   color: #f6c000;
 }
 
-/* line 454, ../sass/default.scss */
+/* line 450, ../sass/default.scss */
 .green {
   color: #0da861;
 }
 
-/* line 457, ../sass/default.scss */
+/* line 453, ../sass/default.scss */
 .green2 {
   color: #00a86d;
 }
 
-/* line 460, ../sass/default.scss */
+/* line 456, ../sass/default.scss */
 .green3 {
   color: #009f5d;
 }
 
-/* line 463, ../sass/default.scss */
+/* line 459, ../sass/default.scss */
 .red {
   color: #f44a3f;
 }
 
-/* line 466, ../sass/default.scss */
+/* line 462, ../sass/default.scss */
 .red2 {
   color: #e0543e;
 }
 
-/* line 469, ../sass/default.scss */
+/* line 465, ../sass/default.scss */
 .red3 {
   color: #d94d3a;
 }
 
-/* line 472, ../sass/default.scss */
+/* line 468, ../sass/default.scss */
 .gray {
   color: #e6e6e6;
 }
 
-/* line 475, ../sass/default.scss */
+/* line 471, ../sass/default.scss */
 .gray2 {
   color: #a9a9a9;
 }
 
-/* line 478, ../sass/default.scss */
+/* line 474, ../sass/default.scss */
 .gray3 {
   color: #797979;
 }
 
-/* line 481, ../sass/default.scss */
+/* line 477, ../sass/default.scss */
 .gray4 {
   color: #515151;
 }
 
-/* line 485, ../sass/default.scss */
+/* line 481, ../sass/default.scss */
 .white {
   color: white !important;
 }
 
-/* line 488, ../sass/default.scss */
+/* line 484, ../sass/default.scss */
 .black {
   color: black !important;
 }
 
-/* line 492, ../sass/default.scss */
+/* line 488, ../sass/default.scss */
 .columns-2 {
   -webkit-column-count: 2;
   -moz-column-count: 2;
@@ -704,7 +708,7 @@ button:not(:disabled):active {
   column-count: 2;
 }
 
-/* line 496, ../sass/default.scss */
+/* line 492, ../sass/default.scss */
 table {
   width: 100%;
   border-collapse: -moz-initial;
@@ -712,16 +716,16 @@ table {
   border-spacing: 2px;
   border-bottom: 1px solid #797979;
 }
-/* line 503, ../sass/default.scss */
+/* line 499, ../sass/default.scss */
 table tr > td:first-child, table th {
   font-weight: 600;
   color: #515151;
 }
-/* line 508, ../sass/default.scss */
+/* line 504, ../sass/default.scss */
 table tr:nth-child(odd) {
   background-color: #e6e6e6;
 }
-/* line 512, ../sass/default.scss */
+/* line 508, ../sass/default.scss */
 table th {
   color: white;
   font-size: 18px;
@@ -732,12 +736,12 @@ table th {
   background: -ms-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
   background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
 }
-/* line 518, ../sass/default.scss */
+/* line 514, ../sass/default.scss */
 table td, table th {
   font-size: 18px;
   padding: 1em 0.5em;
 }
-/* line 523, ../sass/default.scss */
+/* line 519, ../sass/default.scss */
 table td.highlight {
   color: #515151;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat;
@@ -747,31 +751,31 @@ table td.highlight {
   background: -ms-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
   background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
 }
-/* line 528, ../sass/default.scss */
+/* line 524, ../sass/default.scss */
 table.rows {
   border-bottom: none;
   border-right: 1px solid #797979;
 }
 
-/* line 534, ../sass/default.scss */
+/* line 530, ../sass/default.scss */
 q {
   font-size: 45px;
   line-height: 72px;
 }
-/* line 538, ../sass/default.scss */
+/* line 534, ../sass/default.scss */
 q:before {
   content: '“';
   position: absolute;
   margin-left: -0.5em;
 }
-/* line 543, ../sass/default.scss */
+/* line 539, ../sass/default.scss */
 q:after {
   content: '”';
   position: absolute;
   margin-left: 0.1em;
 }
 
-/* line 550, ../sass/default.scss */
+/* line 546, ../sass/default.scss */
 slide.fill {
   background-repeat: no-repeat;
   -webkit-border-radius: 5px;
@@ -786,34 +790,34 @@ slide.fill {
 }
 
 /* Size variants */
-/* line 559, ../sass/default.scss */
+/* line 555, ../sass/default.scss */
 article.smaller p, article.smaller ul {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 565, ../sass/default.scss */
+/* line 561, ../sass/default.scss */
 article.smaller table td, article.smaller table th {
   font-size: 14px;
 }
-/* line 569, ../sass/default.scss */
+/* line 565, ../sass/default.scss */
 article.smaller pre {
   font-size: 15px;
   line-height: 20px;
   letter-spacing: 0;
 }
-/* line 574, ../sass/default.scss */
+/* line 570, ../sass/default.scss */
 article.smaller q {
   font-size: 40px;
   line-height: 48px;
 }
-/* line 578, ../sass/default.scss */
+/* line 574, ../sass/default.scss */
 article.smaller q:before, article.smaller q:after {
   font-size: 60px;
 }
 
 /* Builds */
-/* line 587, ../sass/default.scss */
+/* line 583, ../sass/default.scss */
 .build > * {
   -webkit-transition: opacity 0.5s ease-in-out 0.2s;
   -moz-transition: opacity 0.5s ease-in-out 0.2s;
@@ -821,55 +825,55 @@ article.smaller q:before, article.smaller q:after {
   -o-transition: opacity 0.5s ease-in-out 0.2s;
   transition: opacity 0.5s ease-in-out 0.2s;
 }
-/* line 591, ../sass/default.scss */
+/* line 587, ../sass/default.scss */
 .build .to-build {
   opacity: 0;
 }
-/* line 595, ../sass/default.scss */
+/* line 591, ../sass/default.scss */
 .build .build-fade {
   opacity: 0.3;
 }
-/* line 598, ../sass/default.scss */
+/* line 594, ../sass/default.scss */
 .build .build-fade:hover {
   opacity: 1.0;
 }
 
 /* Pretty print */
-/* line 607, ../sass/default.scss */
+/* line 603, ../sass/default.scss */
 .prettyprint .str,
 .prettyprint .atv {
   /* a markup attribute value */
   color: #009f5d;
 }
 
-/* line 611, ../sass/default.scss */
+/* line 607, ../sass/default.scss */
 .prettyprint .kwd,
 .prettyprint .tag {
   /* a markup tag name */
   color: #0066cc;
 }
 
-/* line 614, ../sass/default.scss */
+/* line 610, ../sass/default.scss */
 .prettyprint .com {
   /* a comment */
   color: #797979;
   font-style: italic;
 }
 
-/* line 618, ../sass/default.scss */
+/* line 614, ../sass/default.scss */
 .prettyprint .lit {
   /* a literal value */
   color: #7f0000;
 }
 
-/* line 623, ../sass/default.scss */
+/* line 619, ../sass/default.scss */
 .prettyprint .pun,
 .prettyprint .opn,
 .prettyprint .clo {
   color: #515151;
 }
 
-/* line 629, ../sass/default.scss */
+/* line 625, ../sass/default.scss */
 .prettyprint .typ,
 .prettyprint .atn,
 .prettyprint .dec,
@@ -878,67 +882,117 @@ article.smaller q:before, article.smaller q:after {
   color: #d94d3a;
 }
 
-/* line 632, ../sass/default.scss */
+/* line 628, ../sass/default.scss */
 .prettyprint .pln {
   color: #515151;
 }
 
 /* line 638, ../sass/default.scss */
+.with-notes slides.layout-widescreen slide.next,
+.with-notes slides.layout-faux-widescreen slide.next {
+  -webkit-transform: translate3d(690px, 80px, 0) scale(0.35);
+  -moz-transform: translate3d(690px, 80px, 0) scale(0.35);
+  -ms-transform: translate3d(690px, 80px, 0) scale(0.35);
+  -o-transform: translate3d(690px, 80px, 0) scale(0.35);
+  transform: translate3d(690px, 80px, 0) scale(0.35);
+}
+/* line 641, ../sass/default.scss */
+.with-notes slides.layout-widescreen slide .note,
+.with-notes slides.layout-faux-widescreen slide .note {
+  -webkit-transform: translate3d(300px, 800px, 0) scale(1.5);
+  -moz-transform: translate3d(300px, 800px, 0) scale(1.5);
+  -ms-transform: translate3d(300px, 800px, 0) scale(1.5);
+  -o-transform: translate3d(300px, 800px, 0) scale(1.5);
+  transform: translate3d(300px, 800px, 0) scale(1.5);
+}
+/* line 647, ../sass/default.scss */
+.with-notes slide {
+  overflow: visible;
+  background: white;
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
+  pointer-events: none;
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+/* line 654, ../sass/default.scss */
+.with-notes slide:not(.backdrop) {
+  -webkit-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
+  -moz-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
+  -ms-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
+  -o-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
+  transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
+  -webkit-box-shadow: 0 0 10px #797979;
+  -moz-box-shadow: 0 0 10px #797979;
+  box-shadow: 0 0 10px #797979;
+}
+/* line 659, ../sass/default.scss */
+.with-notes slide.backdrop {
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #4387fd));
+  background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
+  background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
+  background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
+  background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
+  background-image: radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
+}
+/* line 665, ../sass/default.scss */
+.with-notes slide.next {
+  -webkit-transform: translate3d(570px, 80px, 0) scale(0.35);
+  -moz-transform: translate3d(570px, 80px, 0) scale(0.35);
+  -ms-transform: translate3d(570px, 80px, 0) scale(0.35);
+  -o-transform: translate3d(570px, 80px, 0) scale(0.35);
+  transform: translate3d(570px, 80px, 0) scale(0.35);
+  opacity: 1 !important;
+}
+/* line 669, ../sass/default.scss */
+.with-notes slide.next .note {
+  display: none;
+}
+/* line 674, ../sass/default.scss */
 .with-notes .note {
   opacity: 1;
-  -webkit-transform: translateY(0);
-  -moz-transform: translateY(0);
-  -ms-transform: translateY(0);
-  -o-transform: translateY(0);
-  transform: translateY(0);
   pointer-events: auto;
 }
 
-/* line 645, ../sass/default.scss */
+/* line 680, ../sass/default.scss */
 .note {
   position: absolute;
   z-index: 100;
-  width: 100%;
-  height: 100%;
+  width: 109%;
+  height: 260px;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.3);
-  opacity: 0;
+  background: #e6e6e6;
   pointer-events: none;
-  display: -webkit-box !important;
-  display: -moz-box !important;
-  display: -ms-box !important;
-  display: -o-box !important;
-  display: box !important;
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  -ms-box-orient: vertical;
-  box-orient: vertical;
-  -webkit-box-align: center;
-  -moz-box-align: center;
-  -ms-box-align: center;
-  box-align: center;
-  -webkit-box-pack: center;
-  -moz-box-pack: center;
-  -ms-box-pack: center;
-  box-pack: center;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
-  -webkit-transform: translateY(350px);
-  -moz-transform: translateY(350px);
-  -ms-transform: translateY(350px);
-  -o-transform: translateY(350px);
-  transform: translateY(350px);
-  -webkit-transition: all 0.4s ease-in-out;
-  -moz-transition: all 0.4s ease-in-out;
-  -ms-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-}
-/* line 662, ../sass/default.scss */
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 0 10px #797979;
+  -moz-box-shadow: 0 0 10px #797979;
+  box-shadow: 0 0 10px #797979;
+  -webkit-transform: translate3d(250px, 800px, 0) scale(1.5);
+  -moz-transform: translate3d(250px, 800px, 0) scale(1.5);
+  -ms-transform: translate3d(250px, 800px, 0) scale(1.5);
+  -o-transform: translate3d(250px, 800px, 0) scale(1.5);
+  transform: translate3d(250px, 800px, 0) scale(1.5);
+  -webkit-transition: opacity 400ms ease-in-out;
+  -moz-transition: opacity 400ms ease-in-out;
+  -ms-transition: opacity 400ms ease-in-out;
+  -o-transition: opacity 400ms ease-in-out;
+  transition: opacity 400ms ease-in-out;
+}
+/* line 697, ../sass/default.scss */
 .note > section {
   background: #fff;
   -webkit-border-radius: 5px;
@@ -946,14 +1000,16 @@ article.smaller q:before, article.smaller q:after {
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
-  -webkit-box-shadow: 0 0 10px #797979;
-  -moz-box-shadow: 0 0 10px #797979;
-  box-shadow: 0 0 10px #797979;
-  width: 60%;
-  padding: 2em;
+  height: 100%;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 1em;
 }
 
-/* line 671, ../sass/default.scss */
+/* line 708, ../sass/default.scss */
 .source {
   font-size: 14px;
   color: #a9a9a9;
@@ -962,7 +1018,7 @@ article.smaller q:before, article.smaller q:after {
   left: 60px;
 }
 
-/* line 679, ../sass/default.scss */
+/* line 716, ../sass/default.scss */
 input, button {
   vertical-align: middle;
 }
@@ -978,7 +1034,7 @@ input, button {
   -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
   box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%);
 }*/
-/* line 695, ../sass/default.scss */
+/* line 732, ../sass/default.scss */
 .flexbox {
   display: -webkit-box !important;
   display: -moz-box !important;
@@ -987,7 +1043,7 @@ input, button {
   display: box !important;
 }
 
-/* line 699, ../sass/default.scss */
+/* line 736, ../sass/default.scss */
 .flexbox.vcenter {
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
@@ -1005,7 +1061,7 @@ input, button {
   width: 100%;
 }
 
-/* line 705, ../sass/default.scss */
+/* line 742, ../sass/default.scss */
 .flexbox.vleft {
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
@@ -1023,7 +1079,7 @@ input, button {
   width: 100%;
 }
 
-/* line 711, ../sass/default.scss */
+/* line 748, ../sass/default.scss */
 .auto-fadein {
   -webkit-transition: opacity 0.6s ease-in 1s;
   -moz-transition: opacity 0.6s ease-in 1s;
@@ -1034,7 +1090,7 @@ input, button {
 }
 
 /* Clickable/tappable areas */
-/* line 717, ../sass/default.scss */
+/* line 754, ../sass/default.scss */
 .slide-area {
   z-index: 1000;
   position: absolute;
@@ -1048,59 +1104,59 @@ input, button {
   margin-top: -350px;
 }
 
-/* line 734, ../sass/default.scss */
+/* line 771, ../sass/default.scss */
 #prev-slide-area {
   margin-left: -550px;
 }
 
-/* line 739, ../sass/default.scss */
+/* line 776, ../sass/default.scss */
 #next-slide-area {
   margin-left: 450px;
 }
 
 /* ===== SLIDE CONTENT ===== */
-/* line 747, ../sass/default.scss */
+/* line 784, ../sass/default.scss */
 .logoslide img {
   width: 383px;
   height: 92px;
 }
 
-/* line 753, ../sass/default.scss */
+/* line 790, ../sass/default.scss */
 .segue {
   padding: 60px 120px;
 }
-/* line 756, ../sass/default.scss */
+/* line 793, ../sass/default.scss */
 .segue h2 {
   color: #e6e6e6;
   font-size: 60px;
 }
-/* line 760, ../sass/default.scss */
+/* line 797, ../sass/default.scss */
 .segue h3 {
   color: #e6e6e6;
   line-height: 2.8;
 }
-/* line 764, ../sass/default.scss */
+/* line 801, ../sass/default.scss */
 .segue hgroup {
   position: absolute;
   bottom: 225px;
 }
 
-/* line 770, ../sass/default.scss */
+/* line 807, ../sass/default.scss */
 .thank-you-slide {
   background: #4387fd;
   color: white;
 }
-/* line 774, ../sass/default.scss */
+/* line 811, ../sass/default.scss */
 .thank-you-slide h2 {
   font-size: 60px;
   color: inherit;
 }
-/* line 779, ../sass/default.scss */
+/* line 816, ../sass/default.scss */
 .thank-you-slide article > p {
   margin-top: 2em;
   font-size: 20pt;
 }
-/* line 784, ../sass/default.scss */
+/* line 821, ../sass/default.scss */
 .thank-you-slide > p {
   position: absolute;
   bottom: 80px;
@@ -1108,7 +1164,7 @@ input, button {
   line-height: 1.3;
 }
 
-/* line 792, ../sass/default.scss */
+/* line 829, ../sass/default.scss */
 aside.gdbar {
   height: 97px;
   width: 215px;
@@ -1137,7 +1193,7 @@ aside.gdbar {
   transition: all 0.5s ease-out 0.5s;
   /* Better to transition only on background-size, but not sure how to do that with the mixin. */
 }
-/* line 803, ../sass/default.scss */
+/* line 840, ../sass/default.scss */
 aside.gdbar.right {
   right: 0;
   left: -moz-initial;
@@ -1150,7 +1206,7 @@ aside.gdbar.right {
   -o-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 810, ../sass/default.scss */
+/* line 847, ../sass/default.scss */
 aside.gdbar.right img {
   -webkit-transform: rotateZ(180deg);
   -moz-transform: rotateZ(180deg);
@@ -1158,13 +1214,13 @@ aside.gdbar.right img {
   -o-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 815, ../sass/default.scss */
+/* line 852, ../sass/default.scss */
 aside.gdbar.bottom {
   top: -moz-initial;
   top: initial;
   bottom: 60px;
 }
-/* line 821, ../sass/default.scss */
+/* line 858, ../sass/default.scss */
 aside.gdbar img {
   width: 85px;
   height: 85px;
@@ -1173,24 +1229,24 @@ aside.gdbar img {
   margin: 8px 15px;
 }
 
-/* line 832, ../sass/default.scss */
+/* line 869, ../sass/default.scss */
 .title-slide hgroup {
   bottom: 100px;
 }
-/* line 835, ../sass/default.scss */
+/* line 872, ../sass/default.scss */
 .title-slide hgroup h1 {
   font-size: 65px;
   line-height: 1.4;
   letter-spacing: -3px;
   color: #515151;
 }
-/* line 842, ../sass/default.scss */
+/* line 879, ../sass/default.scss */
 .title-slide hgroup h2 {
   font-size: 34px;
   color: #a9a9a9;
   font-weight: inherit;
 }
-/* line 848, ../sass/default.scss */
+/* line 885, ../sass/default.scss */
 .title-slide hgroup p {
   font-size: 20px;
   color: #797979;
@@ -1198,11 +1254,11 @@ aside.gdbar img {
   margin-top: 2em;
 }
 
-/* line 857, ../sass/default.scss */
+/* line 894, ../sass/default.scss */
 .quote {
   color: #e6e6e6;
 }
-/* line 860, ../sass/default.scss */
+/* line 897, ../sass/default.scss */
 .quote .author {
   font-size: 24px;
   position: absolute;
@@ -1210,12 +1266,12 @@ aside.gdbar img {
   line-height: 1.4;
 }
 
-/* line 869, ../sass/default.scss */
+/* line 906, ../sass/default.scss */
 [data-config-contact] a {
   color: white;
   border-bottom: none;
 }
-/* line 873, ../sass/default.scss */
+/* line 910, ../sass/default.scss */
 [data-config-contact] span {
   width: 115px;
   display: inline-block;
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;
-- 
cgit v1.2.3