add grass for headstone slide, make transitions less flashy

index.html

@@ -51,17 +51,20 @@
         <img src="styles/cat-money.jpg" alt="" class="cover">
         <div class="cover" style="background-color: rgba(0, 0, 0, 0.6)">
           <h1>What is money?</h1>
+          <li>
+            <ul janus-timeline janus-future="down">Durable</ul>
+            <ul janus-timeline janus-future="down">Portable</ul>
+            <ul janus-timeline janus-future="down">Fungible</ul>
+            <ul janus-timeline janus-future="down">Divisible</ul>
+            <ul janus-timeline janus-future="down">Scarce</ul>
+          </li>
         </div>
         <div class="notes">
         Medium of exchange: portable, durable, fungible
         Unit of account: divisible, fungible
         Store of value: durable, scarce, fungible
 
-        Durable
+        Next: things we've used as money</div>
-        Portable
-        Divisible
-        Fungible
-        Scarce</div>
       </section>
 
       <section>
@@ -86,7 +89,9 @@
             </tr>
           </tbody>
         </table>
-        <div class="notes">Used on most continents, still a legal currency in Papua New Guinea alongside their paper money.</div>
+        <div class="notes">Shells
+          Used on most continents.
+          Still a legal currency in Papua New Guinea alongside their paper money.</div>
       </section>
 
       <section>
@@ -112,7 +117,11 @@
           </tbody>
         </table>
 
-        <div class="notes">Stone money was made in Micronesia and Guam, transported to the island of <em>Yap</em> as currency. Value from the story of how hard it was to transport. Ownership transferred by oral history, stones not moved.</div>
+        <div class="notes">Stone money
+          Made in Micronesia and Guam
+          Transported to the island of <em>Yap</em> as currency.
+          Value from the story of how hard it was to transport.
+          Ownership transferred by oral history, stones not moved.</div>
       </section>
 
       <section>
@@ -127,7 +136,7 @@
               <th>Portable</th><td class="yes"></td>
             </tr>
             <tr>
-              <th>Divisible</th><td class="maybe"></td>
+              <th>Divisible</th><td class="yes"></td>
             </tr>
             <tr>
               <th>Fungible</th><td class="yes"></td>
@@ -137,7 +146,10 @@
             </tr>
           </tbody>
         </table>
-        <div class="notes">Pretty popular. Still used today.</div>
+        <div class="notes">
+          Gold (and silver).
+          Pretty popular.
+          Still used today.</div>
       </section>
 
       <section>
@@ -162,7 +174,8 @@
             </tr>
           </tbody>
         </table>
-        <div class="notes">Used to be a currency form of gold and silver, after World War 1 pretty much everybody decided to switch to unbacked "floating money" so they could fuel government expenses with inflation.</div>
+        <div class="notes">US dollars
+          Used to represent gold and silver, after World War 1 pretty much everybody decided to switch to unbacked "floating money" so they could fuel government expenses with inflation.</div>
       </section>
 
       <section>
@@ -180,12 +193,12 @@
             <tr>
               <th>Joshua</th>
               <td>25</td>
-              <td><span janus-timeline style="color: #F00;">&nbsp;- 15</span></td>
+              <td><div janus-timeline janus-future="right" style="color: #F00;">&nbsp;- 15</div></td>
             </tr>
             <tr>
               <th>Jack</th>
               <td>12</td>
-              <td><span janus-timeline style="color: #090;">&nbsp;+ 15</span></td>
+              <td><div janus-timeline janus-future="right" style="color: #090;">&nbsp;+ 15</div></td>
             </tr>
             <tr>
               <th>Dave</th>
@@ -197,7 +210,7 @@
             </tr>
           </tbody>
         </table>
-        <div class="notes">Ledger keeps track each person's money.
+        <div class="notes">A ledger keeps track each person's money.
         To send money, reduce my account and increase their account.
         Like Paypal.
 
@@ -216,7 +229,7 @@
             <tr>
               <th><code>1D4FA353C82B4</code></th>
               <td>11.5</td>
-              <td><span janus-timeline style="color: #F00;">&nbsp;- 11</span></td>
+              <td><div janus-timeline janus-future="right" style="color: #F00;">&nbsp;- 11</div></td>
             </tr>
             <tr>
               <th><code>37563EA8932FB</code></th>
@@ -229,7 +242,7 @@
             <tr>
               <th><code>D15F73E98432A</code></th>
               <td>13.5</td>
-              <td><span janus-timeline style="color: #F00;">&nbsp;- 4</span></td>
+              <td><div janus-timeline janus-future="right" style="color: #F00;">&nbsp;- 4</div></td>
             </tr>
             <tr>
               <th><code>333BCBA13A54C</code></th>
@@ -242,7 +255,7 @@
             <tr>
               <th><code>C5F83ED13497A</code></th>
               <td>6.0</td>
-              <td><span janus-timeline style="color: #090;">&nbsp;+ 15</span></td>
+              <td><div janus-timeline janus-future="right" style="color: #090;">&nbsp;+ 15</div></td>
             </tr>
             <tr>
               <th><code>92A1E683111A2</code></th>
@@ -255,6 +268,8 @@
 
       <section>
         <img src="styles/headstone.svg" style="height: 60vh; margin: 0.5em auto 0" alt="">
+        <img src="styles/grass-back.svg" style="position: absolute; z-index: -1; width: 100%; top: 60vh">
+        <img src="styles/grass-front.svg" style="position: absolute; width: 100%; top: 66vh">
         <div class="notes">There's a company that actually did this, called DigiCash. they maintained a ledger with cryptographically controlled balances. Consumers weren't concerned enough about security or privacy and they ran out of money.</div>
       </section>
 
@@ -271,7 +286,10 @@
         <h1>Double Spending</h1>
         <div class="notes">Real world, double spending is easy.
         Two checks
-        First deposit "wins"</div>
+        First deposit "wins"
+        All about timing
+
+        How do you fix this?</div>
       </section>
 
       <section>
@@ -279,17 +297,17 @@
         <h1 style="color: black">Hashes</h1>
       </section>
 
+      <section>
+        <h1>Proof of Work</h1>
+      </section>
+
       <section class="hashpointers">
         <img janus-timeline janus-future="big" src="styles/hashpointers-linked-list.svg" alt="" class="contain" style="object-position: 70% 50%">
         <img janus-timeline janus-future="big" src="styles/hashpointers-hashes.svg" alt="" class="contain" style="object-position: 70% 50%">
-        <img janus-timeline janus-future="big" src="styles/hashpointers-new-entry.svg" alt="" class="contain" style="object-position: 70% 50%">
+        <img janus-timeline janus-future="left" src="styles/hashpointers-new-entry.svg" alt="" class="contain" style="object-position: 70% 50%">
         <h1>Hash Pointers</h1>
       </section>
 
-      <section>
-        <h1>Proof of Work</h1>
-      </section>
-
       <section>
         <h1>Applications</h1>
       </section>
@@ -347,7 +365,7 @@
           <li><a href="https://www.flickr.com/photos/imtfi/5875765289"><img src="styles/money-transaction.jpg" alt="" class="thumbnail">Institute for Money, Technology and Financial Inclusion, Flickr</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>-->
           <li><a href="https://www.flickr.com/photos/ammichaels/7159593410"><img src="styles/hashbrowns.jpg" alt="" class="thumbnail">cheeseslave, Flickr</a></li>
-          <li>Emoji art supplied by <a href="http://emojione.com/">EmojiOne</li>
+          <li>Emoji art supplied by <a href="http://emojione.com/">EmojiOne</a></li>
         </ul>
       </section>
 

styles/headstone.svg

@@ -37,13 +37,13 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1920"
-     inkscape:window-height="1059"
+     inkscape:window-height="1031"
      id="namedview8"
      showgrid="false"
      inkscape:zoom="2"
      inkscape:cx="97.626703"
      inkscape:cy="65.903328"
-     inkscape:window-x="0"
+     inkscape:window-x="1920"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg2" />
@@ -51,19 +51,19 @@
      id="svg_1">
     <path
        id="path3182-0"
-       fill="#3f3f3f"
+       d="m20.434 240.88c-3.7958-30.828-7.4225-64.539-11.843-96.616 5.1726-2.1568 3.6101-2.0968 6.3277-3.1948-2.5964-1.1882-3.3345-0.93298-7.1852-2.2775l-6.0814-48.168s-21.335-92.048 89.33-90.246c106.99 1.7426 82.458 91.162 82.458 91.162l-132.85 153.46-20.156-4.123z"
-       d="m20.434 240.88c-3.7958-30.828-7.4225-64.539-11.843-96.616 5.1726-2.1568 3.6101-2.0968 6.3277-3.1948-2.5964-1.1882-3.3345-0.93298-7.1852-2.2775l-6.0814-48.168s-21.335-92.048 89.33-90.246c106.99 1.7426 82.458 91.162 82.458 91.162l-132.85 153.46-20.156-4.123z" />
+       fill="#3f3f3f" />
     <path
        id="path3413"
-       fill="#d8d8d8"
+       d="m39.474 169.42c-4.861 1.696-10.998 0.20203-18.302-4.211l10.608 8.746 7.6933-4.535zm-12.315-97.736l-10.155-4.5917 3.3555 11.568 6.7992-6.9759zm5.2098-10.773c-5.2392 0.2816-10.478-3.999-15.718-7.1525l10.949 12.451 4.7683-5.2981zm-18.641-5.1866l13.464 8.011 7.0442-4.113c-6.836 1.5255-13.672-2.095-20.508-3.898zm-10.325 99.331l20.039 4.849 11.48-5.827-12.33-0.296-12.972-1.988-6.2179 3.262z"
-       d="m39.474 169.42c-4.861 1.696-10.998 0.20203-18.302-4.211l10.608 8.746 7.6933-4.535zm-12.315-97.736l-10.155-4.5917 3.3555 11.568 6.7992-6.9759zm5.2098-10.773c-5.2392 0.2816-10.478-3.999-15.718-7.1525l10.949 12.451 4.7683-5.2981zm-18.641-5.1866l13.464 8.011 7.0442-4.113c-6.836 1.5255-13.672-2.095-20.508-3.898zm-10.325 99.331l20.039 4.849 11.48-5.827-12.33-0.296-12.972-1.988-6.2179 3.262z" />
+       fill="#d8d8d8" />
     <path
        id="path3182-8"
-       fill="#7f7f7f"
+       d="m40.59 245l-8.8861-71.04 7.9067-4.5386c-6.6805-3.6638-9.8451-5.5622-9.9097-12.847l-1.106-7.4704 11.472-5.8023-12.227-0.26984-6.0318-48.289c-0.69471-6.2623-1.1354-9.34-1.2948-16.094 1.7607-2.2555 4.2944-4.5412 6.5989-6.9224 0.17472-1.6972 0.33023-3.9259 0.49741-5.5871-0.74297-3.0372 2.953-4.8935 4.7641-5.1702 1.2052-3.1818 1.1887-2.6066-0.097954-8.0862 2.7472-1.6694 4.487-2.6994 7.0384-3.8875-3.5416-4.7079-3.0987-5.9008-5.9237-15.439 16.802-24.962 52.386-28.545 77.747-29.06 95.533-1.9381 82.458 91.162 82.458 91.162l-22.447 148.88-130.56 0.4582z"
-       d="m40.59 245l-8.8861-71.04 7.9067-4.5386c-6.6805-3.6638-9.8451-5.5622-9.9097-12.847l-1.106-7.4704 11.472-5.8023-12.227-0.26984-6.0318-48.289c-0.69471-6.2623-1.1354-9.34-1.2948-16.094 1.7607-2.2555 4.2944-4.5412 6.5989-6.9224 0.17472-1.6972 0.33023-3.9259 0.49741-5.5871-0.74297-3.0372 2.953-4.8935 4.7641-5.1702 1.2052-3.1818 1.1887-2.6066-0.097954-8.0862 2.7472-1.6694 4.487-2.6994 7.0384-3.8875-3.5416-4.7079-3.0987-5.9008-5.9237-15.439 16.802-24.962 52.386-28.545 77.747-29.06 95.533-1.9381 82.458 91.162 82.458 91.162l-22.447 148.88-130.56 0.4582z" />
+       fill="#7f7f7f" />
   </g>
   <image
-     y="65.351692"
+     y="50.351692"
      x="28.44492"
      id="image3348"
      xlink:href="data:image/png;base64,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 "
@@ -74,29 +74,24 @@
      xml:space="preserve"
      style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      x="104.02856"
-     y="148"
+     y="131"
      id="text3355"
      sodipodi:linespacing="125%"><tspan
        sodipodi:role="line"
        id="tspan3357"
        x="104.02856"
-       y="148"
+       y="131"
        style="text-align:center;text-anchor:middle">1990-</tspan><tspan
        sodipodi:role="line"
        x="104.02856"
-       y="176.125"
+       y="159.125"
        id="tspan3387"
        style="text-align:center;text-anchor:middle">1998<tspan
    style="fill:none"
    id="tspan3397">-</tspan></tspan><tspan
        sodipodi:role="line"
        x="104.02856"
-       y="204.25"
+       y="187.25"
-       id="tspan3395"
-       style="text-align:center;text-anchor:middle" /><tspan
-       sodipodi:role="line"
-       x="104.02856"
-       y="232.375"
        id="tspan3389"
        style="text-align:center;text-anchor:middle">Bankruptcy</tspan></text>
 </svg>

styles/main.css

@@ -421,6 +421,7 @@ section {
 }
 
 [janus-timeline='future'] {
+  transition: transform ease 0.5s, opacity ease 0.5s, visibility step-end 0.5s;
   opacity: 0;
   visibility: hidden;
 }
@@ -435,7 +436,7 @@ body.show-notes section[janus-timeline='future'] [janus-timeline='future'] {
 }
 
 body:not(.show-notes) [janus-timeline='past'][janus-past='down'], body:not(.show-notes) [janus-timeline='future'][janus-future='down'] {
-  transform: translate3d(0, 101vh, 0);
+  transform: translate3d(0, 100vh, 0);
   opacity: 1;
   visibility: hidden;
   pointer-events: none;
@@ -443,7 +444,7 @@ body:not(.show-notes) [janus-timeline='past'][janus-past='down'], body:not(.show
 }
 
 body:not(.show-notes) [janus-timeline='past'][janus-past='left'], body:not(.show-notes) [janus-timeline='future'][janus-future='left'] {
-  transform: translate3d(-101vw, 0, 0);
+  transform: translate3d(-100vw, 0, 0);
   opacity: 1;
   visibility: hidden;
   pointer-events: none;
@@ -451,15 +452,16 @@ body:not(.show-notes) [janus-timeline='past'][janus-past='left'], body:not(.show
 }
 
 body:not(.show-notes) [janus-timeline='past'][janus-past='right'], body:not(.show-notes) [janus-timeline='future'][janus-future='right'] {
-  transform: translate3d(101vw, 0, 0);
+  transform: translate3d(100vw, 0, 0);
   opacity: 1;
   visibility: hidden;
   pointer-events: none;
   z-index: 2;
 }
 
-section[janus-timeline='past'], body:not(.show-notes) [janus-timeline='past'][janus-past='big'], body:not(.show-notes) [janus-timeline='future'][janus-future='big'] {
+section[janus-timeline='past'], /* default past-tense state */
-  transform: translate3d(0, 0, 0) scale(5);
+body:not(.show-notes) [janus-timeline='past'][janus-past='big'], body:not(.show-notes) [janus-timeline='future'][janus-future='big'] {
+  transform: translate3d(0, 5vmin, 0) scale(1.25);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
@@ -476,7 +478,8 @@ section[janus-timeline='present'] {
   opacity: 1;
 }
 
-section[janus-timeline='future'] {
+section[janus-timeline='future'], /* default future-tense state */
+body:not(.show-notes) [janus-timeline='past'][janus-past='small'], body:not(.show-notes) [janus-timeline='future'][janus-future='small'] {
   transform: translate3d(0, -5vmin, 0) scale(0.8);
   opacity: 0;
   visibility: hidden;