Move jekyll static site to /docs

docs/_config.yml

@@ -3,19 +3,9 @@ destination: _site
 plugins_dir: _plugins
 layouts_dir: _layouts
 data_dir:    _data
-include:     ['.htaccess']
+include:     ["dist"]
 exclude:     [
-  '.github',
-  '_scss',
-  'coverage',
-  'node_modules',
-  'src',
-  'test',
-  'CONTRIBUTING.md',
-  'gulpfile.js',
-  'README.md',
-  'webpack.config.js',
-  'webpack.config.min.js'
+  './_scss',
 ]
 
 permalink: /:title

docs/_includes/nav.html

@@ -18,7 +18,7 @@
           <a class="btn btn--primary" href="https://github.com/Vestride/Shuffle">GitHub Repo</a>
         </div>
         <div class="col-3@sm">
-          <a class="btn btn--primary" href="https://twitter.com/Vestride">By @Vestride</a>
+          <a class="btn btn--primary" href="https://twitter.com/Vestride">@Vestride</a>
         </div>
         <div class="col-3@sm">
           <a class="btn btn--primary" href="{{ site.baseurl }}/faq">FAQ</a>

docs/_posts/2013-05-03-images.html

@@ -14,8 +14,9 @@ prism: true
       <p>You can encounter problems when shuffle item dimensions depend on images. <a href="{{ site.baseurl }}{% post_url 2013-06-29-image-problems %}">Like this demo</a>. There are three good solutions to this.</p>
       <ol>
         <li>Set an explicit height on <code>.shuffle-item</code>s like the <a href="{{ site.baseurl }}{% post_url 2013-05-01-basic %}">basic demo</a>.</li>
-        <li>Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses this technique.</li>
+        <li>Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses that technique.</li>
         <li>Get notified when images load and call <code>myShuffleInstance.layout()</code>. I recommend using <a href="http://desandro.github.io/imagesloaded/">Desandro's images loaded plugin</a> to know when your images have finished loading.</li>
+        <li>Do nothing and let your shuffle instance call <code>layout()</code> on the <code>window</code>'s <code>load</code> event. This will the item layout to change on page load.</li>
       </ol>
     </div>
   </div>

docs/_posts/2013-06-29-image-problems.html

@@ -8,9 +8,10 @@ extraJS: [ "demos/images.js"]
 <div class="container">
   <div class="row">
     <div class="col-12@sm">
-      <h2>This probably looks broken.</h2>
-      <p>In this demo, the height of each item in the grid depends on the image. If Shuffle is initialized before the images load, the heights it calculates will be incorrect. <a href="{{ site.baseurl }}{% post_url 2013-05-03-images %}">See here</a> for a solution.</p>
-      <p>Resize the window and it'll fix itself.</p>
+      <h2>These images may be overlapping.</h2>
+      <p>In this demo, the height of each item in the grid depends on the image. If Shuffle is initialized before the images load, the heights it calculates will be incorrect.</p>
+      <p><a href="{{ site.baseurl }}{% post_url 2013-05-03-images %}">Go to this images demo for a solutions</a>.</p>
+      <p>Shuffle will call <code>layout()</code> again once the window's <code>load</code> event fires to resolve this and other async assets (like fonts) which could affect the size of your items. Resizing the window would also fix it.</p>
     </div>
   </div>
 </div>

docs/dist

@@ -0,0 +1 @@
+../dist