docs : white space and CSS tweaks

_includes/element-partial.html

@@ -1,6 +1,7 @@
-<div class="element {% for cat in element.categories %}{{ cat }} {% endfor %} " data-symbol="{{ element.symbol }}" data-category="{{ element.categories[0] }}">
+
-  <p class="number">{{ element.number }}</p>
+    <div class="element {% for cat in element.categories %}{{ cat }} {% endfor %} " data-symbol="{{ element.symbol }}" data-category="{{ element.categories[0] }}">
-  <h3 class="symbol">{{ element.symbol }}</h3>
+      <p class="number">{{ element.number }}</p>
-  <h2 class="name">{{ element.name }} {{ w_class }}</h2>
+      <h3 class="symbol">{{ element.symbol }}</h3>
-  <p class="weight">{{ element.weight }}</p>
+      <h2 class="name">{{ element.name }} {{ w_class }}</h2>
-</div>
+      <p class="weight">{{ element.weight }}</p>
+    </div>

_includes/sort-buttons.html

@@ -1,24 +1,25 @@
-<h3>Sort</h3>
 
-<ul id="sort" class="sort option-set">
+    <h3>Sort</h3>
-  <li>
+
-    <ul class="sort asc option-set floated clearfix">
+    <ul id="sort" class="sort option-set">
-      <li><a href="#original-order" class="selected">original-order (asc)</a></li>
+      <li>
-      <li><a href="#name">name (asc)</a></li>
+        <ul class="sort asc option-set floated clearfix">
-      <li><a href="#symbol">symbol (asc)</a></li>
+          <li><a href="#original-order" class="selected">original-order (asc)</a></li>
-      <li><a href="#number">number (asc)</a></li>
+          <li><a href="#name">name (asc)</a></li>
-      <li><a href="#weight">weight (asc)</a></li>
+          <li><a href="#symbol">symbol (asc)</a></li>
-      <li><a href="#category">category (asc)</a></li>
+          <li><a href="#number">number (asc)</a></li>
-    </ul>
+          <li><a href="#weight">weight (asc)</a></li>
-  </li>
+          <li><a href="#category">category (asc)</a></li>
-  <li>
+        </ul>
-    <ul class="sort desc option-set floated clearfix">
+      </li>
-      <li><a href="#original-order">original-order (desc)</a></li>
+      <li>
-      <li><a href="#name">name (desc)</a></li>
+        <ul class="sort desc option-set floated clearfix">
-      <li><a href="#symbol">symbol (desc)</a></li>
+          <li><a href="#original-order">original-order (desc)</a></li>
-      <li><a href="#number">number (desc)</a></li>
+          <li><a href="#name">name (desc)</a></li>
-      <li><a href="#weight">weight (desc)</a></li>
+          <li><a href="#symbol">symbol (desc)</a></li>
-      <li><a href="#category">category (desc)</a></li>
+          <li><a href="#number">number (desc)</a></li>
-    </ul>
+          <li><a href="#weight">weight (desc)</a></li>
-  </li>
+          <li><a href="#category">category (desc)</a></li>
-</ul>
+        </ul>
+      </li>
+    </ul>

_posts/demos/2010-12-30-sorting.html

@@ -17,8 +17,8 @@ category: demos
   <h1>{{ page.title }}</h1>
   
   <section id="copy">
-    
+    <p>Sort item elements based on any data you can extract from them.</p>
-    
+    <p>See <a href="../docs/sorting.html">docs on Sorting</a>.</p>
   </section>
   
   <section id="options" class="clearfix">

_posts/docs/2010-12-01-introduction.mdown

@@ -22,6 +22,10 @@ Items can be hidden and shown easily just by using simple jQuery selectors.
 
 These items can then be rearranged in their order via sorting. Sorting relies on any data held within an item.
 
+### Interoperabilty
+
+All functionality built into Isotope was designed to work together. You can sort AND filter AND modify the layout all in one plugin call.
+
 ### Progressive Enhancement 
 
 All these behaviors leverage animation to produce engaging interfaces. The best CSS transition and transform features are utilized when available.

css/style.css

@@ -311,6 +311,7 @@ body.doc {
 .doc #content {
 /*  font-size: 14px;
   line-height: 1.7em;*/
+  margin-bottom: 20px;
 }
 
 .doc h2,