shuffle robot presentation order on the home page and all page. For #40

_includes/box-item.html

@@ -1,4 +1,9 @@
-<article class="box-item post-{{post.main-class}}" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
+{% if post.title == site.featured_robot %}
+   {% assign element_class = 'featured-item' %}
+{% else %}
+   {% assign element_class = 'box-item' %}
+{% endif %}
+<article class="{{ element_class }} post-{{post.main-class}}" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
         <span class="ribbon">
           {% if post.title == site.featured_robot %}
           <a href="{{ post.url | prepend: site.baseurl }}"><span>Featured</span></a>

_includes/shuffle-items.html

@@ -0,0 +1,12 @@
+<!-- Include after a set of box-items to shuffle them -->
+
+<script type="text/javascript" src="/assets/js/jquery-min.js"></script>
+
+<script type="text/javascript">
+var boxes = $(".box-item");
+for(var i = 0; i < boxes.length; i++){
+    var target = Math.floor(Math.random() * boxes.length -1) + 1;
+    var target2 = Math.floor(Math.random() * boxes.length -1) +1;
+    boxes.eq(target).before(boxes.eq(target2));
+}
+</script>

all.html

@@ -5,7 +5,8 @@
 <main class="post-content" id="post" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
     <div style="padding-top: 33px" id="grid" class="row flex-grid">
     {% for post in site.posts %}
-      {% include box-item.html %}
+        {% include box-item.html %}
     {% endfor %}
+    {% include shuffle-items.html %}
     </div>
 </main>

index.html

@@ -84,6 +84,7 @@ <H2>Find a robot by category:</H2>
     {% for post in site.posts %}
       {% include box-item.html %}
     {% endfor %}
+    {% include shuffle-items.html %}
     </div>
 
 </main>

src/styl/_home.styl

@@ -21,7 +21,7 @@ main
     text-transform uppercase
     padding 0 rem(15px)
 
-.box-item
+.box-item, .featured-item
     flex 1 0 300px
     margin 0 rem(15px) rem(50px)
     display inline-block