improved presenter view

index.html

@@ -45,11 +45,58 @@
         <h1>Hash Pointers</h1>
       </section>
 
+      <section>
+        <h1>Applications</h1>
+      </section>
+
+      <section>
+        <h1>Currency</h1>
+      </section>
+
+      <section>
+        <h1>Digital Assets</h1>
+      </section>
+
+      <section>
+        <div class="notes">
+          payment information
+          usernames
+          DNS
+        </div>
+        <h1>Identity</h1>
+      </section>
+
+      <section>
+        <div class="notes">
+          embedding a hash in the blockchain demonstrates an item's existence at point in the past
+        </div>
+        <h1>Proof of Existence</h1>
+      </section>
+
+      <section>
+        <img src="styles/make-it-real.png" alt="" class="contain">
+        <h1 style="background: linear-gradient(to bottom, black, rgba(0,0,0,0)); padding: 0.25em 0 1em; margin-bottom: auto">How to Make It Real</h1>
+      </section>
+
+      <section>
+        <h1>Payment Infrastructure</h1>
+      </section>
+
+      <section>
+        <div class="notes">
+          DAO
+          Ethereum/RootStock
+        </div>
+        <h1>Smart Contracts</h1>
+      </section>
+
       <section class="credits">
         <h1>Credits</h1>
         <ul>
           <li><a href="https://www.flickr.com/photos/stevendepolo/5644838033/"><img src="styles/blocks.jpg" alt="" class="thumbnail">Steven Depolo, Flickr</a></li>
           <li><a href="https://pixabay.com/en/chain-rust-past-bondage-history-232930/"><img src="styles/chains.jpg" alt="" class="thumbnail">Pixabay</a></li>
+          <li><a href="https://pixabay.com/en/mall-shopping-interior-store-sale-591337/"><img src="styles/shopping-mall.jpg" alt="" class="thumbnail">Pixabay</a></li>
+          <li><a href="https://commons.wikimedia.org/wiki/File:The_Velveteen_Rabbit_pg_37.jpg"><img src="styles/make-it-real.png" alt="" class="thumbnail">Velveteen Rabbit, Margery Williams 1922</a></li>
         </ul>
       </section>
 

styles/main.css

@@ -434,18 +434,43 @@ img.contain {
   object-fit: contain;
 }
 
+body.show-notes {
+  background-color: #777;
+}
+
 body.show-notes section {
   transition: none;
 }
 
+body.show-notes section[janus-timeline='present'] {
+  transform: scale(0.75);
+  transform-origin: 0% 0%;
+  overflow: visible;
+}
+
+.notes {
+  display: none;
+  white-space: pre-line;
+}
+body.show-notes section[janus-timeline='present'] > .notes {
+  display: block;
+  position: absolute;
+  left: 100%;
+  width: 33.33%;
+  height: 100%;
+  font-size: 0.5rem;
+  text-align: left;
+  padding-left: 0.5em;
+}
+
 body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
   transform: scale(0.25);
   transform-origin: bottom right;
   top: auto;
   left: auto;
-  bottom: 0.4rem;
+  bottom: 0;
-  right: 0.4rem;
+  right: 0;
-  opacity: 0.75;
+  opacity: 1;
   visibility: visible;
   outline: 0.2rem solid white;
   z-index: 3;