add slides, "appear" effect, video, image hover, update notes

css/animations.css

@@ -28,6 +28,36 @@
     animation-duration: 0.3s;
 }
 
+@keyframes fade-out {
+    from {
+        opacity: 100;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 100;
+    }
+}
+
+.anim-fade-begin {
+    animation-name: fade-out;
+    animation-timing-function: ease-in;
+    animation-duration: 0.5s;
+}
+
+.anim-fade-end {
+    animation-name: fade-in;
+    animation-timing-function: ease-out;
+    animation-duration: 0.3s;
+}
+
 @keyframes spin {
     from {
         transform: rotate(0deg)

css/style.css

@@ -1,11 +1,11 @@
 body {
     padding: 5px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 4vh;
+    font-size: 3vh;
 }
 
 button {
-    font-size: 4vh;
+    font-size: 3vh;
 }
 
 pre {
@@ -20,12 +20,26 @@ pre {
     font-family: "consolas", sans-serif
 }
 
-slide-deck img {
+video {
+    height: 40vh;
+    max-width: 90vw;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
+slide-deck img {
+    display: block;
+    max-height: 60vh;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+slide-deck img.expandable:hover {
+    margin-top: -20vh;
+    max-height: 80vh;
+}
+
 @media only screen and (max-width: 800px) {
     body {
         font-size: 14px;
@@ -37,7 +51,7 @@ slide-deck img {
 
 @media only screen and (max-width: 1200px) {
     body {
-        font-size: 3vh;
+        font-size: 2vh;
     }
     button {
         font-size: 14px;
@@ -61,6 +75,10 @@ img {
     height: auto;
 }
 
+.appear {
+    display: none;
+}
+
 .footer {
     float: left;
     height: 15vh;