Add footer typer. Change background to white

Author: jbampton

_includes/footer.html

@@ -32,6 +32,13 @@ <h2 class="footer-heading">
           {% endif %}
         </ul>
         <p>{{ site.last_update }}{{ site.time }}</p>
+
+        <p>
+          <span class="typer" id="some-id" data-delay="100" data-delim=":"
+          data-words="The Beast...?!?!?!!:The Beast 240+ Style...!!!!!!:The Beast T-661 - Prototype Series 661 Terminator - a shapeshifting Ruby assassin...!!!:A Powerful Beast...!!!!!:Bring out The Beast...!!!!!:A truly magical and wondrous Beast...!!!!:Enter The Beast...!!?!?!!:The Beast sometimes enjoys Friday Night Football...?!?!?!?!!:Beast is being trained by an even more powerful beast:The Beast a Jedi in training...!!!!:Jekyll, kramdown, Git, PHP, Ruby, The Beast...!!!:The Beast wants to be the MOST POWERFUL BEAST...!!!!"
+          data-colors="black"></span>
+        </p>
+
       </div>
     </div>
 

_includes/head.html

@@ -9,7 +9,6 @@
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
-
   <!--Load the AJAX API-->
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>

_layouts/default.html

@@ -14,7 +14,7 @@
     </div>
 
     {% include footer.html %}
-
+    
+    <script type="text/javascript" src="/js/typer.js"></script>
   </body>
-
 </html>

_sass/_layout.scss

@@ -105,7 +105,7 @@
 .footer-heading {
     font-size: 18px;
     margin-bottom: $spacing-unit / 2 ;
-    text-align: center; 
+    text-align: center;
 }
 
 .contact-list,
@@ -122,6 +122,8 @@
 
 }
 
+body { background-color: white;}
+
 .footer-col {
     float: left;
     margin-bottom: $spacing-unit / 2;
@@ -140,7 +142,7 @@
 }
 
 .footer-col p {
-  color: purple;
+  color: black;
   font-size: 14pt;
 }
 

js/typer.js

@@ -64,23 +64,6 @@ Typer.prototype.doTyping = function() {
   }, p.atWordEnd ? this.deleteDelay : this.delay);
 };
 
-typers = {};
-elements = document.getElementsByClassName("typer");
-for (var i = 0, e; e = elements[i++];) {
-  typers[e.id] = new Typer(e);
-}
-elements = document.getElementsByClassName("typer-stop");
-for (var i = 0, e; e = elements[i++];) {
-  var owner = typers[e.dataset.owner];
-  e.onclick = function(){owner.stop();};
-}
-elements = document.getElementsByClassName("typer-start");
-for (var i = 0, e; e = elements[i++];) {
-  var owner = typers[e.dataset.owner];
-  e.onclick = function(){owner.start();};
-}
-
-
 var Cursor = function(element) {
   this.element = element;
   this.cursorDisplay = element.dataset.cursorDisplay || "_";
@@ -103,9 +86,29 @@ Cursor.prototype.updateBlinkState = function() {
   }
 }
 
-elements2 = document.getElementsByClassName("cursor");
-for (var i = 0, e; e = elements2[i++];) {
-  var t = new Cursor(e);
-  t.owner.cursor = t;
-  console.log(t.owner.cursor);
+function TyperSetup() {
+  typers = {};
+  elements = document.getElementsByClassName("typer");
+  for (var i = 0, e; e = elements[i++];) {
+    typers[e.id] = new Typer(e);
+  }
+  elements = document.getElementsByClassName("typer-stop");
+  for (var i = 0, e; e = elements[i++];) {
+    var owner = typers[e.dataset.owner];
+    e.onclick = function(){owner.stop();};
+  }
+  elements = document.getElementsByClassName("typer-start");
+  for (var i = 0, e; e = elements[i++];) {
+    var owner = typers[e.dataset.owner];
+    e.onclick = function(){owner.start();};
+  }
+
+  elements2 = document.getElementsByClassName("cursor");
+  for (var i = 0, e; e = elements2[i++];) {
+    var t = new Cursor(e);
+    t.owner.cursor = t;
+    console.log(t.owner.cursor);
+  }
 }
+
+TyperSetup();