docs : homepage : make features like elements

css/style.css

@@ -605,48 +605,6 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
 
 /**** Super list ****/
 
-#super-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  margin-bottom: 40px;
-}
-
-#super-list li {
-  display: inline-block;
-  float: left;
-  font-size: 28px;
-  line-height: 1.2em;
-  margin: 2px;
-  font-weight: 300;
-}
-
-#super-list li.feature { background: #111; }
-#super-list li span,
-#super-list li a {
-  display: block;
-  padding: 0.2em 0.5em;
-}
-#super-list li a {
-  color: #222;
-}
-#super-list li.docs  a { background: #3CF; }
-#super-list li.demos a { background: #FC3; }
-#super-list li.link a { background: #E58; color: white; }
-
-#super-list li a:hover {
-  background: white;
-}
-
-#super-list li.link a:hover { color: #222; }
-
-#super-list.masonry li {
-  width: 216px;
-}
-#super-list.masonry li.feature,
-#super-list.masonry li.link {
-  width: 436px;
-}
 
 /**** Sites using Isotope ****/
 
@@ -711,19 +669,11 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
   padding-top: 8px;
 }
 
-.super-list .link,
-.super-list .feature {
-  font-size: 26px;
+.super-list .link {
+  font-size: 24px;
   line-height: 1.2em;
   font-weight: 300;
   margin: 5px;
-  height: 90px;
-}
-
-.super-list .feature {
-  width: 330px;
-  padding: 10px;
-  background: #111;
 }
 
 .super-list .link {
@@ -749,6 +699,13 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
   color: #111;
 }
 
+.super-list .feature .name {
+  bottom: auto;
+  top: 140px;
+  left: 18px;
+  font-size: 20px;
+}
+
 /**** Infinite Scroll ****/
 
 #infscr-loading {

index.html

@@ -2,6 +2,39 @@
 title: Isotope
 layout: default
 category: homepage
+features:
+  - name: An exquisite jQuery plugin for magical layouts
+    symbol: Iso
+    number: 1
+    category: alkali
+  - name: Reveal & hide items with filtering
+    symbol: Filt
+    number: 11
+    category: alkaline-earth
+  - name: Re–order items with sorting
+    symbol: Srt
+    number: 27
+    category: lanthanoid
+  - name: Dynamic, intelligent layouts
+    symbol: Lao
+    number: 31
+    category: actinoid
+  - name: Captivating animations
+    symbol: Ani
+    number: 41
+    category: transition
+  - name: Sort items by just about anything
+    symbol: Any
+    number: 51
+    category: post-transition
+  - name: Powerful methods, simple syntax
+    symbol: Pow
+    number: 61
+    category: metalloid
+  - name: Progressively enhanced for CSS3 transforms & transitions
+    symbol: CS3
+    number: 71
+    category: halogen
 ---
   
   <section id="options" class="clearfix">
@@ -9,7 +42,7 @@ category: homepage
       <h2>Filter:</h2>
       <ul id="filter" class="option-set floated clearfix" data-option-key="filter">
         <li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
-        <li><a href="#elements" data-option-value=".element">elements</a></li>
+        <li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li>
         <li><a href="#features" data-option-value=".feature">features</a></li>
         <li><a href="#examples" data-option-value=".example">examples</a></li>
       </ul>
@@ -32,19 +65,18 @@ category: homepage
     </div>
   </section>
   
-  <div id="container" class="super-list clearfix">
+  <div id="container" class="super-list variable-sizes clearfix">
     {% for elem_number in site.random_order limit:30 %}
       {% assign element = site.elements[elem_number] %}
       {% include element-partial.html %}
     {% endfor %}
-    <div class="feature" data-number="1">An exquisite jQuery plugin for magical&nbsp;layouts</div>
-    <div class="feature" data-number="11">Reveal &amp; hide items with&nbsp;filtering</div>
-    <div class="feature" data-number="21">Re&ndash;order items with&nbsp;sorting</div>
-    <div class="feature" data-number="31">Dynamic, intelligent layouts</div>
-    <div class="feature" data-number="41">Captivating animations</div>
-    <div class="feature" data-number="51">Sort items by just about&nbsp;anything</div>
-    <div class="feature" data-number="61">Powerful methods, simple&nbsp;syntax</div>
-    <div class="feature" data-number="71">Progressively enhanced for CSS3 transforms &amp;&nbsp;transitions</div>
+    {% for feature in page.features %}
+      <div class="element feature {{ feature.category }} width2 height2">
+        <p class="number">{{ feature.number }}</p>
+        <h3 class="symbol">{{ feature.symbol }}</h3>
+        <h2 class="name">{{ feature.name }}</h2>
+      </div>
+    {% endfor %}
     <div class="link" data-number="5"><a href="jquery.isotope.min.js">Down&#8203;load jquery&#8203;.isotope&#8203;.min.js</a></div>
     <div class="link" data-number="13"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Down&#8203;load this project</a></div> 
     <div class="link" data-number="35"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></div>