feat: F1 to toggle next-slide preview

index.html

@@ -11,8 +11,8 @@
         <h1>Presentation Title</h1>
       </section>
       <section class="image">
-        <h1>Slide Two</h1>
         <img src="https://placekitten.com/1024/768" alt="" />
+        <h1>Slide Two</h1>
       </section>
       <section>
         <h1>Slide Three</h1>

scripts/app.js

@@ -6,6 +6,9 @@
   slideNext,
   slidePrev;
 
+  function $(selector) {
+    return document.querySelector(selector);
+  }
   function $$(selector){
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
@@ -25,6 +28,9 @@
   var init = function() {
     slides = $$('main>section');
     currentSlideNumber = 0;
+    shortcut.add('F1', function() {
+      document.body.classList.toggle('show-notes');
+    });
     shortcut.add('Page_down', function() {
       if (currentSlideNumber < slides.length - 1) {
         currentSlideNumber++;

styles/main.css

@@ -6,10 +6,6 @@
   padding: 0;
 }
 
-* + * {
-  margin-top: 1em;
-}
-
 :root {
   box-sizing: border-box;
   line-height: 1.5;
@@ -25,32 +21,32 @@ body {
   margin: 0;
   background-color: black;
   color: white;
-  /*background-image: url('30000-light-stripes.gif');
-  background-size: cover;
-  box-shadow: 0 0 10vmin black inset, 0 0 10vmin black inset;*/
+  overflow: hidden;
 }
 
 main {
   margin-top: 0;
   perspective: 100vmin;
   transform-style: preserve-3d;
-  overflow: hidden;
   height: 100vh;
 }
 
 /* Components */
 section {
   position: absolute;
+  z-index: 1;
   display: flex;
   flex-direction: column;
+  justify-content: space-around;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 1em;
   overflow: hidden;
+  text-align: center;
+  background-color: black;
   transition: transform ease 1s, opacity ease 1s, visibility step-end 1s;
   transform-origin: 50% 50%;
-  text-align: center;
 }
 
 [janus-timeline='past'] {
@@ -60,15 +56,24 @@ section {
   transition: transform ease 1s, opacity ease 1s, visibility step-start 1s;
 }
 
-[janus-timeline='future'] {
-  visibility: hidden;
+@media only screen {
+  [janus-timeline='future'] {
+    opacity: 0.5;
+  }
+}
+
+@media not print {
+  [janus-timeline='future'] {
+    visibility: hidden;
+  }
 }
 
 section[janus-timeline='past'] {
-  transform: translate3d(0, 0, 100vmin);
+  transform: translate3d(0, 0, 0) scale(5);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  z-index: 2;
 }
 
 section[janus-timeline='present'] {
@@ -77,7 +82,7 @@ section[janus-timeline='present'] {
 }
 
 section[janus-timeline='future'] {
-  transform: translate3d(0, 0, -25vmin);
+  transform: translate3d(0, -5vmin, 0) scale(0.8);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
@@ -85,7 +90,6 @@ section[janus-timeline='future'] {
 
 section.image > img {
   position: absolute;
-  margin: 0;
   top: 0;
   left: 0;
   height: 100%;
@@ -93,3 +97,17 @@ section.image > img {
   object-fit: cover;
   z-index: -1;
 }
+
+body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
+  transition: none;
+  transform: scale(0.25);
+  transform-origin: bottom right;
+  top: auto;
+  left: auto;
+  bottom: 0.4rem;
+  right: 0.4rem;
+  opacity: 1;
+  visibility: visible;
+  outline: 0.1rem solid white;
+  z-index: 3;
+}