lots more work

index.html

@@ -30,35 +30,39 @@
       <section class="row title-page">
         <div class="col">
           <img src="styles/blocks.jpg" alt="" class="cover">
-          <h1 style="background-color: black; color: white; display: inline-block; align-self: flex-end;">Block</h1>
+          <h1 style="font-weight: 900; background-color: black; color: white; display: inline-block; align-self: flex-end;">Block</h1>
         </div>
         <div class="col">
           <img src="styles/chains.jpg" alt="" class="cover">
-          <h1 style="background-color: white; color: black; display: inline-block; align-self: flex-start;">Chain</h1>
+          <h1 style="font-weight: 900; background-color: white; color: black; display: inline-block; align-self: flex-start;">Chain</h1>
         </div>
+        <div class="notes">Blockchain is this hot new buzzword.
+        We have to start with the big one, Bitcoin.</div>
       </section>
 
       <section>
         <img src="styles/bitcoin.svg" alt="" class="contain">
+        <div class="notes">Bitcoin was started on October 31, 2008. Open-sourced Jan 3, 2009. Creator pseudonym Satoshi Nakamoto.
+        Technically not first cryptocurrency, DigiCash came in 1994.
+        First <em>decentralized</em> virtual currency.</div>
       </section>
 
       <section>
         <img src="styles/cat-money.jpg" alt="" class="cover">
         <div janus-timeline class="cover" style="background-color: rgba(0, 0, 0, 0.8)">
           <h1>What is money?</h1>
-          <ul>
-            <li janus-timeline>Durable</li>
-            <li janus-timeline>Portable</li>
-            <li janus-timeline>Divisible</li>
-            <li janus-timeline>Fungible</li>
-            <li janus-timeline>Store of value</li>
-          </ul>
         </div>
+        <div class="notes">Durable
+        Portable
+        Divisible
+        Fungible
+        Scarce</div>
       </section>
 
       <section>
         <img src="styles/seashells.jpg" alt="" class="cover">
-        <table class="yesnomaybe" style="border: 0px solid transparent; border-width: 3em 2.5em 0 0; text-shadow: 0 0 1em black, 0 0 1em black;">
+        <div class="cover" style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"></div>
+        <table class="yesnomaybe">
           <thead>
             <tr>
               <th></th>
@@ -66,7 +70,7 @@
               <th><div>Portable</div></th>
               <th><div>Divisible</div></th>
               <th><div>Fungible</div></th>
-              <th><div>Store of<br>value</div></th>
+              <th><div>Scarce</div></th>
             </tr>
           </thead>
           <tbody>
@@ -80,11 +84,13 @@
             </tr>
           </tbody>
         </table>
+        <div class="notes">Used on most continents, still a legal currency in Papua New Guinea alongside their paper money.</div>
       </section>
 
       <section>
         <img src="styles/Yap_Stone_Money.jpg" alt="" class="cover">
-        <table class="yesnomaybe" style="border: 0px solid transparent; border-width: 3em 2.5em 0 0; text-shadow: 0 0 1em black, 0 0 1em black;">
+        <div class="cover" style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"></div>
+        <table class="yesnomaybe">
           <thead>
             <tr>
               <th></th>
@@ -92,12 +98,12 @@
               <th><div>Portable</div></th>
               <th><div>Divisible</div></th>
               <th><div>Fungible</div></th>
-              <th><div>Store of<br>value</div></th>
+              <th><div>Scarce</div></th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <th>Yap Stones (Rai)</th>
+              <th>Rai stones</th>
               <td class="yes"></td>
               <td class="no"></td>
               <td class="no"></td>
@@ -106,11 +112,14 @@
             </tr>
           </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>
       </section>
 
       <section>
+        <div class="cover" style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"></div>
         <img src="styles/gold.jpg" alt="" class="cover">
-        <table class="yesnomaybe" style="border: 0px solid transparent; border-width: 3em 2.5em 0 0; text-shadow: 0 0 1em black, 0 0 1em black;">
+        <div class="cover" style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"></div>
+        <table class="yesnomaybe">
           <thead>
             <tr>
               <th></th>
@@ -118,7 +127,7 @@
               <th><div>Portable</div></th>
               <th><div>Divisible</div></th>
               <th><div>Fungible</div></th>
-              <th><div>Store of<br>value</div></th>
+              <th><div>Scarce</div></th>
             </tr>
           </thead>
           <tbody>
@@ -132,10 +141,13 @@
             </tr>
           </tbody>
         </table>
+        <div class="notes">Pretty popular. Still used today.</div>
       </section>
 
       <section>
-        <table class="yesnomaybe" style="border: 0px solid transparent; border-width: 3em 2.5em 0 0; text-shadow: 0 0 1em black, 0 0 1em black;">
+        <img src="styles/dollars.jpg" alt="" class="cover">
+        <div class="cover" style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))"></div>
+        <table class="yesnomaybe">
           <thead>
             <tr>
               <th></th>
@@ -143,7 +155,7 @@
               <th><div>Portable</div></th>
               <th><div>Divisible</div></th>
               <th><div>Fungible</div></th>
-              <th><div>Store of<br>value</div></th>
+              <th><div>Scarce</div></th>
             </tr>
           </thead>
           <tbody>
@@ -157,35 +169,96 @@
             </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>
       </section>
 
       <section>
-        <table class="yesnomaybe" style="border: 0px solid transparent; border-width: 3em 2.5em 0 0; text-shadow: 0 0 1em black, 0 0 1em black;">
+        <h1>How could we make<br><em>digital</em> currency?</h1>
-          <thead>
+        <img src="styles/heath.png" alt="" janus-timeline janus-past="hidden" style="position: absolute; height: 60vh; bottom: -5vh; right: 0; transform: rotate(-30deg)">
+        <div janus-timeline></div>
+        <div class="notes">If I send you a file, I still have the file. Digital items can be duplicated; how can I send you something the way I do in the physical world? The Yapanese people had the right idea: use a ledger.</div>
+      </section>
+
+      <section>
+        <table>
+          <tbody style="text-align: right;">
             <tr>
-              <th></th>
+              <th>Joshua</th>
-              <th><div>Durable</div></th>
+              <td>25</td>
-              <th><div>Portable</div></th>
+              <td><span janus-timeline style="color: #F00;">&nbsp;- 15</span></td>
-              <th><div>Divisible</div></th>
-              <th><div>Fungible</div></th>
-              <th><div>Store of<br>value</div></th>
             </tr>
-          </thead>
-          <tbody>
             <tr>
-              <th>Gift Cards</th>
+              <th>Jack</th>
-              <td class="yes"></td>
+              <td>12</td>
-              <td class="yes"></td>
+              <td><span janus-timeline style="color: #090;">&nbsp;+ 15</span></td>
-              <td class="yes"></td>
+            </tr>
-              <td class="no"></td>
+            <tr>
-              <td class="no"></td>
+              <th>Dave</th>
+              <td>9</td>
+            </tr>
+            <tr>
+              <th>George</th>
+              <td>40</td>
             </tr>
           </tbody>
         </table>
+        <div class="notes">We can use a ledger to keep track of how much money each person has. If I want to send money, we reduce my account and increase someone else's account.
+        This is similar to how Paypal works at a simple level.
+        Problems:
+        Everyone has to trust whoever maintains the ledger, since they can monitor it and change it.</div>
       </section>
 
       <section>
-        <h1>How can you make a<br><em>digital</em> currency?</h1>
+        <img src="styles/padlock.jpg" alt="" class="cover">
+        <h1 style="color: #f7931a; font-weight: 900; text-shadow: 0 0 2em black, 0 0 1em black">Cryptography</h1>
+        <div class="notes">We can use public and private keys to control balances in an anonymous ledger.</div>
+      </section>
+
+      <section>
+        <table>
+          <tbody style="text-align: right; font-size: 0.8rem">
+            <tr>
+              <th><code>1D4FA353C82B4</code></th>
+              <td>11.5</td>
+              <td><span janus-timeline style="color: #F00;">&nbsp;- 11</span></td>
+            </tr>
+            <tr>
+              <th><code>37563EA8932FB</code></th>
+              <td>6.0</td>
+              <td><span janus-timeline style="color: #090;">&nbsp;+ 15</span></td>
+            </tr>
+            <tr>
+              <th><code>D163512ECD12E</code></th>
+              <td>9.0</td>
+            </tr>
+            <tr>
+              <th><code>D15F73E98432A</code></th>
+              <td>13.5</td>
+              <td><span janus-timeline style="color: #F00;">&nbsp;- 4</span></td>
+            </tr>
+            <tr>
+              <th><code>333BCBA13A54C</code></th>
+              <td>9.7</td>
+            </tr>
+            <tr>
+              <th><code>8DBDA78D8BEF2</code></th>
+              <td>1.1</td>
+            </tr>
+            <tr>
+              <th><code>C5F83ED13497A</code></th>
+              <td>6.0</td>
+            </tr>
+            <tr>
+              <th><code>92A1E683111A2</code></th>
+              <td>30.2</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="notes">Then instead of sending a payment from "Joshua" to "Jack", it's a payment from "private keys A and B" to "public key C".</div>
+      </section>
+
+      <section>
+        <img src="styles/headstone.svg" style="height: 60vh; margin: 0.5em auto 0" alt="">
       </section>
 
       <section>
@@ -200,6 +273,10 @@
         <h1>Hash Pointers</h1>
       </section>
 
+      <section>
+        <h1>Proof of Work</h1>
+      </section>
+
       <section>
         <h1>Applications</h1>
       </section>
@@ -249,12 +326,9 @@
         <h1>Credits</h1>
         <ul style="font-size: 0.5rem">
           <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/money-cat-wealth-canadian-money-1144553/"><img src="styles/cat-money.jpg" alt="" class="thumbnail">Pixabay</a></li>
           <li><a href="https://commons.wikimedia.org/w/index.php?curid=161923"><img src="styles/Yap_Stone_Money.jpg" alt="" class="thumbnail">Eric Guinther, English Wikipedia</a></li>
-          <li><a href="https://pixabay.com/en/gold-treasure-rich-golden-money-207585/"><img src="styles/gold.jpg" alt="" class="thumbnail">Pixabay</a></li>
           <li><a href="https://www.flickr.com/photos/ishtaure-dawn/14297543026"><img src="styles/seashells.jpg" alt="" class="thumbnail">Ishataure Dawn, Flickr</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://www.flickr.com/photos/68751915@N05/6710868859"><img src="styles/giftcards.jpg" alt="" class="thumbnail">401(K) 2010, 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>

styles/blockchain.css

@@ -13,3 +13,25 @@
   font-size: 0.75em;
   line-height: 1.2;
 }
+
+table.yesnomaybe {
+  border: 0px solid transparent;
+  border-width: 3em 2.5em 0 0;
+  margin: auto auto 5% auto;
+}
+
+table.yesnomaybe .yes, table.yesnomaybe .no, table.yesnomaybe .maybe {
+  width: 1em;
+  background-size: auto 80%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+table.yesnomaybe .yes {
+  background-image: url(../libs/svg/2705.svg);
+}
+table.yesnomaybe .no {
+  background-image: url(../libs/svg/274e.svg);
+}
+table.yesnomaybe .maybe {
+  background-image: url(../libs/svg/2753.svg);
+}

styles/fonts/merriweather/SIL Open Font License.txt

@@ -0,0 +1,45 @@
+Copyright (c) 2010-2013, Sorkin Type Co (www.sorkintype.com) with Reserved Font Name 'Merriweather'
+
+Merriweather is a trademark of Sorkin Type Co.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

styles/headstone.svg

@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="195"
+   height="245"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="headstone.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1059"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="2"
+     inkscape:cx="97.626703"
+     inkscape:cy="65.903328"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <g
+     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" />
+    <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" />
+    <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" />
+  </g>
+  <image
+     y="65.351692"
+     x="28.44492"
+     id="image3348"
+     xlink:href="data:image/png;base64,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 "
+     preserveAspectRatio="none"
+     height="41.062145"
+     width="152.81355" />
+  <text
+     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"
+     id="text3355"
+     sodipodi:linespacing="125%"><tspan
+       sodipodi:role="line"
+       id="tspan3357"
+       x="104.02856"
+       y="148"
+       style="text-align:center;text-anchor:middle">1990-</tspan><tspan
+       sodipodi:role="line"
+       x="104.02856"
+       y="176.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"
+       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

@@ -1,5 +1,7 @@
 /* Basics */
 
+@import url(./fonts/merriweather/font.css);
+
 *, *:before, *:after {
   box-sizing: inherit;
   margin: 0;
@@ -7,7 +9,7 @@
 }
 
 :root {
-  --main-font: sans-serif;
+  --main-font: merriweather_sans, sans-serif;
   --monospace-font: monospace;
   --mouse-x: 0.5;
 
@@ -127,7 +129,7 @@ body {
   margin: 0;
   background-color: black;
   color: white;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
@@ -251,6 +253,18 @@ thead th div {
 
 tbody th {
   text-align: right;
+  padding-right: 0.5em;
+}
+
+tbody tr, tbody td {
+  text-align: inherit;
+}
+
+hr {
+  width: 80%;
+  margin: 0.25rem auto;
+  border: 1px solid white;
+  border-width: 1px 0;
 }
 
 section {
@@ -428,6 +442,11 @@ section[janus-timeline='past'], body:not(.show-notes) [janus-timeline='past'][ja
   z-index: 2;
 }
 
+[janus-timeline='past'][janus-past='hidden'] {
+  opacity: 0;
+  visibility: hidden;
+}
+
 section[janus-timeline='present'] {
   transform: none;
   opacity: 1;
@@ -476,10 +495,8 @@ body.show-notes section[janus-timeline='present'] {
 .notes {
   display: none;
   white-space: pre-line;
-}
-body.show-notes section[janus-timeline='present'] > .notes {
-  display: block;
   position: absolute;
+  top: 0.2rem;
   left: 100%;
   width: 33.33%;
   height: 100%;
@@ -487,6 +504,9 @@ body.show-notes section[janus-timeline='present'] > .notes {
   text-align: left;
   padding-left: 0.5em;
 }
+body.show-notes section[janus-timeline='present'] > .notes {
+  display: block;
+}
 
 body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
   transform: scale(0.25);
@@ -500,26 +520,3 @@ body.show-notes section[janus-timeline='present'] + section[janus-timeline='futu
   outline: 0.2rem solid white;
   z-index: 3;
 }
-
-table.yesnomaybe {
-  border: 0px solid transparent;
-  border-width: 3em 2.5em 0 0;
-  text-shadow: 0 0 1em black, 0 0 1.5em black;
-  margin: auto auto 5% auto;
-}
-
-table.yesnomaybe .yes, table.yesnomaybe .no, table.yesnomaybe .maybe {
-  width: 1em;
-  background-size: auto 80%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-table.yesnomaybe .yes {
-  background-image: url(../libs/svg/2705.svg);
-}
-table.yesnomaybe .no {
-  background-image: url(../libs/svg/274e.svg);
-}
-table.yesnomaybe .maybe {
-  background-image: url(../libs/svg/2753.svg);
-}