hover png -> gif in docs

Author: ShMcK

_includes/docs/js.html

@@ -82,3 +82,22 @@
     }(jQuery);
   });
 </script>
+
+<script>
+$(function(){
+  $('.gif').hover(function(){
+    // on mouse enter
+    console.log($(this));
+    var path = $(this).attr('src');
+    console.log('path', path);
+    var gif = path.substring(0, path.lastIndexOf('.')) + '.gif';
+    console.log('gif', gif);
+    $(this).attr('src', gif);
+  }, function(){
+    // on mouse leave
+    var path = $(this).attr('src');
+    var png = path.substring(0, path.lastIndexOf('.')) + '.png';
+    $(this).attr('src', png);
+  });
+});
+</script>

_includes/docs/nav.html

@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="/css/docs.min.css"/>
+<link rel="stylesheet" type="text/css" href="/css/docs.css"/>
 <link rel="stylesheet" type="text/css" href="/css/dark-syntax.css"/>
 
 <!-- Navigation -->

_posts/2016-01-01-installation.md

@@ -11,24 +11,28 @@ But to build a tutorial, you'll also need the **CodeRoad-CLI**.
 
 ### Atom CodeRoad
 
-Use [Atom CodeRoad](https://github.com/coderoad/atom-coderoad) to view and play your tutorial
+Use [Atom CodeRoad](https://github.com/coderoad/atom-coderoad) to view and play your tutorial.
 
-* Download the [Atom](https://atom.io/) editor
+You'll need to download the [Atom](https://atom.io/) editor and install *Atom Shell Commands*.
 
-* Install the *Atom-CodeRoad* package, or use the [apm](https://github.com/atom/apm) command-line tool
+Install the *Atom-CodeRoad* package: `> apm install atom-coderoad`
 
-`> apm install atom-coderoad`
+For an example of how to do this, *hover* over the image below:
 
-You may also want to install [terminal-plus](https://atom.io/packages/terminal-plus).
+![Install atom-coderoad](/img/gif/install-atom-coderoad.png){: .gif}
 
-* Toggle open *Atom-CodeRoad* in *Atom* using the "packages" menu or press *ctrl-alt-0*.
+You may also want to install [terminal-plus](https://atom.io/packages/terminal-plus) used in the example above.
+
+Toggle open *Atom-CodeRoad* using the *Packages* menu or press *ctrl-alt-0*.
 
 
 
 ### Tutorial
 
 To install a tutorial, setup a *package.json* file and save the tutorial as a dependency. Make sure [NodeJS](nodejs.org) is already installed.
 
+![Install a Tutorial](/img/gif/install-tutorial.png){: .gif}
+
 You can setup a project quickly by typing `npm init --y` into the command line in your project's folder. This agrees to all of the defaults for your newly created *package.json* file.
 
 Now you can install a tutorial. Run `npm install --save-dev $THE-PACKAGE-NAME$` to save the tutorial as a package development dependency. If you run *Atom-CodeRoad* you should see the tutorial appear on the first screen.
@@ -47,6 +51,6 @@ Install *CodeRoad-CLI*. Make sure [NodeJS](nodejs.org) is already installed
 
 It's recommended you also enable *autosave* in Atom.
 
-![Enable autosave in Atom](/img/gif/autosave.gif)
+![Enable autosave in Atom](/img/gif/autosave.png){: .gif}
 
 Tutorials run unit tests on save, *autosave* can speed up the process.

_posts/2016-01-02-development.md

@@ -80,8 +80,6 @@ Inside of your demo root directory, connect the link.
 
 Open *Atom-Coderoad* to view your tutorial. Your package should appear as a loaded package. Click on it.
 
-![CodeRoad Loaded Packages](/img/docs/loaded-packages.png)
-
 Reload *Atom* to view changes. You can use the Atom [command-palette](https://atom.io/docs/latest/getting-started-atom-basics#command-palette) to find "reload" or simply use the reload hot-key.
 
 * Windows & Linux: alt-ctrl-r

_posts/2016-01-07-test-snippets.md

@@ -12,4 +12,4 @@ Test Runners may have pre-made [Atom snippets](https://atom.io/docs/latest/using
 
 For example, typing the snippet `mochacr-f` will generate an entire set of tests for a *mocha-coderoad* function. See an example:
 
-![Mocha Coderoad Test Snippets](/img/gif/snippets.gif)
+![Mocha Coderoad Test Snippets](/img/gif/snippets.png){: .gif}

css/docs.css

@@ -7,21 +7,17 @@
 @viewport {
   width: device-width
 }
-
 body {
   width: 100%;
   height: 100%;
   position: relative;
 }
-
 .navbar {
   margin-bottom: 0;
 }
-
 #content:focus {
   outline: 0
 }
-
 .bs-docs-sidebar.affix {
   position: static
 }
@@ -125,7 +121,6 @@ body {
 .bs-docs-section:last-child {
   margin-bottom: 0
 }
-
 #docs code {
   padding: 0;
 }
@@ -138,3 +133,7 @@ body {
 #docs ul li {
   list-style-type: circle;
 }
+.gif {
+  display: block;
+  margin: 20px auto;
+}