Replace lorem ipsum text with plugin description

_config.yml

@@ -16,6 +16,8 @@ defaultTitle: 'Shuffle.js'
 defaultDescription: 'Categorize, sort, and filter a responsive grid of items'
 defaultImage: '/img/hero.png'
 
+longDescription: 'Shuffle.js is a jQuery plugin for sorting, filtering, and laying out a group of items. It’s performant, responsive, and fast. Check out the demos!'
+
 demos:
   - url: 'demos/2013-05-01-basic'
     slug: basic
@@ -72,7 +74,7 @@ items:
     title: Tennis
     img: tennis-ball.png
     original: tennis-ball.jpg
-    description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    description: longDescription
     cols: 6
   - groups: [ wallpaper, 3d ]
     date: 2009-05-27
@@ -85,7 +87,7 @@ items:
     title: Master Chief
     img: master-chief.png
     original: Master_Chief_Portrait_by_Eightfold_Studios.jpg
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+    description: longDescription
     extras: [ h2 ]
     cols: 3
   - groups: [ wallpaper, 3d ]
@@ -99,7 +101,7 @@ items:
     title: Pumpkin
     img: pumpkin.png
     original: pumpkin.jpg
-    description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    description: longDescription
     cols: 6
   - groups: [ wallpaper, 3d ]
     date: 2013-05-19
@@ -113,7 +115,7 @@ items:
     title: Newegg
     img: newegg.png
     original: newegg.jpg
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+    description: longDescription
     extras: [ h2 ]
     cols: 3
   - groups: [ wallpaper ]
@@ -133,7 +135,7 @@ items:
     title: Grass
     img: grassy-hills.png
     original: grassy-hills.tif
-    description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    description: longDescription
     cols: 6
   - groups: [ wallpaper, 3d ]
     date: 2013-05-19

_includes/features.html

@@ -1,10 +1,11 @@
 <h2>Features</h2>
 
 <ul>
+  <li>Fast - Only one forced synchronous layout (aka reflow) on init, sort, or shuffle.</li>
   <li>Uses CSS Transitions!</li>
   <li>Responsive (try resizing the window!)</li>
   <li>Filter items by groups</li>
   <li>Items can have multiple groups and be different sizes</li>
   <li>Sort items</li>
-  <li>Advanced filtering method (like searching)</li>
+  <li>Advanced filtering (like searching)</li>
 </ul>

_includes/picture-item.html

@@ -6,11 +6,12 @@
   {% assign extras = "" %}
 {% endif %}
 {% if item.cols %}{% assign cols = item.cols %}{% else %}{% assign cols = 3 %}{% endif %}
+{% assign description = item.description %}
 <figure class="span{{ cols }} m-span3 picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
   <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
   <div class="picture-item__details clearfix">
     <figcaption class="picture-item__title pull-left"><a href="{{ site.baseurl }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>
     <p class="picture-item__tags pull-right">{{ item.groups | join: ', ' }}</p>
   </div>
-  {% if item.description %}<p class="picture-item__description">{{ item.description }}</p>{% endif %}
+  {% if description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}<p class="picture-item__description">{{ description }}</p>{% endif %}
 </figure>

_includes/usage.html

@@ -19,7 +19,7 @@
       <figcaption class="picture-item__title">Tennis</figcaption>
       <p class="picture-item__tags">wallpaper, 3d</p>
     </div>
-    <p class="picture-item__description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p class="picture-item__description">Some description here.</p>
   </figure>
   <figure class="span3 picture-item" data-groups='["wallpaper","3d"]'>
     <img src="/img/imac.png" height="145" width="230" />
@@ -34,7 +34,7 @@
       <figcaption class="picture-item__title">Master Chief</figcaption>
       <p class="picture-item__tags">graphics</p>
     </div>
-    <p class="picture-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p class="picture-item__description">Some description here.</p>
   </figure>
 &lt;/div&gt;</code></pre>
 

_posts/demos/2013-05-01-basic.html

@@ -26,13 +26,8 @@ extraJS: [ "demos/homepage.js" ]
 
 <div class="container-fluid">
   <div class="row-fluid">
-    <h2>Another Section</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <h2>Shuffle.js</h2>
+    <p>{{ site.longDescription }}</p>
   </div>
 </div>
 

_posts/demos/2013-05-02-adaptive.html

@@ -64,12 +64,7 @@ extraCSS: [ "/css/gallery.css" ]
 
 <section>
   <div class="container">
-    <h2>Another section</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <h2>Shuffle.js</h2>
+    <p>{{ site.longDescription }}</p>
   </div>
 </section>

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

@@ -67,13 +67,8 @@ prism: true
 
 <section>
   <div class="container-fluid">
-    <h2>Another section</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <h2>Shuffle.js</h2>
+    <p>{{ site.longDescription }}</p>
   </div>
 </section>
 

_posts/demos/2013-06-19-adding-removing.html

@@ -75,13 +75,8 @@ extraJS: [ "demos/adding-removing.js" ]
 <section class="container">
   <div class="row">
     <div class="span12">
-      <h2>Another Section</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <h2>Shuffle.js</h2>
+    <p>{{ site.longDescription }}</p>
     </div>
   </div>
 </section>

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

@@ -42,13 +42,8 @@ extraJS: [ "demos/images-broken.js"]
 
 <section>
   <div class="container">
-    <h2>Another section</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <h2>Shuffle.js</h2>
+    <p>{{ site.longDescription }}</p>
   </div>
 </section>
 

_scss/_main.scss

@@ -246,6 +246,10 @@ input.faq-search {
   .figure-wrap:nth-child(n + 3) {
     margin-top: 1em;
   }
+
+  .site-nav .btn {
+    margin-bottom: 5px;
+  }
 }
 
 

css/style.css

@@ -2098,6 +2098,10 @@ input.faq-search:focus::-moz-input-placeholder {
   .figure-wrap:nth-child(n + 3) {
     margin-top: 1em;
   }
+
+  .site-nav .btn {
+    margin-bottom: 5px;
+  }
 }
 .btn-group:before, .btn-group:after {
   content: " ";

js/page.js

@@ -398,8 +398,12 @@ $(document).ready(function() {
   Modules.Nav.init();
   Modules.Polyfill.init();
 
-  var src = site_url + '/img/favicon-sprite.png';
-  new Modules.Favicon( src, 21, 7, 3000 * 1 );
+  // Only animate the favicon on the homepage so that
+  // timeline tests aren't filled with junk
+  if ( window.location.pathname === '/Shuffle/' ) {
+    var src = site_url + '/img/favicon-sprite.png';
+    new Modules.Favicon( src, 21, 7, 3000 * 1 );
+  }
 });