Expanding deck

css/animations.css

@@ -18,4 +18,16 @@
     animation-name: enter-right;
     animation-timing-function: ease-out;
     animation-duration: 0.3s;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg) }
+    to { transform: rotate(360deg) }
+}
+
+.anim-spin {
+    animation-name: spin;
+    animation-timing-function: ease-in-out;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
 }

css/style.css

@@ -1,11 +1,29 @@
 body {
     padding: 5px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 5vh;
+    font-size: 4vh;
 }
 
 button {
-    font-size: 5vh;
+    font-size: 4vh;
+}
+
+pre {
+    background-color: black;
+    overflow-x: auto;
+    word-break: normal;
+    word-wrap: normal;
+    white-space: pre;
+    border: solid 1px gray;
+    padding: 0.5em;
+    color: lightgreen;
+    font-family: "consolas", sans-serif
+}
+
+slide-deck img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 @media only screen and (max-width: 800px) {

slides/001-title.html

@@ -1,5 +1,6 @@
 <title>Vanilla.js: Modern 1st Party JavaScript</title>
 <h1>Vanilla.js: Modern 1st Party JavaScript</h1>
+<img src="/images/vanillin.png" class="anim-spin" alt="Vanillin molecule" title="Vanillin molecule"/>
 <h2>Jeremy Likness</h2>
 <h3>Cloud Advocate, Microsoft</h3>
 <nextslide>002-experiment</nextslide>

slides/002-experiment.html

@@ -1,3 +1,7 @@
-<title>More Stuff</title>
+<title>Let's try an experiment...</title>
-<h1>More Stuff</h1>
+<h2>Let's try an experiment</h2>
+<pre>
+ng --new 
+echo "%s" > cat.txt
+</pre>
 <nextslide>003-morestuff</nextslide>