diff --git a/css/style.css b/css/style.css
index 7919a80..7f2b429 100644
--- a/css/style.css
+++ b/css/style.css
@@ -485,6 +485,13 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
background: white;
}
+#super-list.masonry li {
+ width: 216px;
+}
+#super-list.masonry li.feature {
+ width: 436px;
+}
+
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
diff --git a/index.html b/index.html
index 10f7432..17d0179 100644
--- a/index.html
+++ b/index.html
@@ -16,13 +16,22 @@ layout: nil
margin-right: 10px;
}
+ #options .option-combo {
+ display: inline-block;
+
+ }
+
#options h2 {
- line-height: 32px;
+ line-height: 34px;
margin-bottom: 0;
+ margin-right: 5px;
+ display: inline-block;
+ vertical-align: top;
}
#options ul {
margin-right: 20px;
+ display: inline-block;
}
@@ -32,27 +41,43 @@ layout: nil
{{ site.name }}
- Filter:
-
- Sort:
-
+
+
+
-
- - Aggressively enhanced for CSS3 transforms & transitions
+
+
+ - An exquisite jQuery plugin for magical layouts
+ - Reveal & hide items with filtering
+ - Re–order items with sorting
- Dynamic, intelligent layouts
- - Reveal and hide items with filtering
- - Re-order items with sorting
- - Get sorting data from just about anything
- - Built on jQuery UI's widget bridge for powerful methods
+ - Captivating animations
+ - Sort items by just about anything
+ - Powerful methods, simple syntax
+ - Aggressively enhanced for CSS3 transforms & transitions
{% for doc in site.categories.docs reversed %}
- Docs: {{ doc.title }}
{% endfor %}
@@ -62,17 +87,6 @@ layout: nil
- Docs
-
-
- Demos
-
- {% for demo in site.categories.demos reversed %}
- - {{ demo.title }}
- {% endfor %}
-
-
@@ -86,9 +100,15 @@ layout: nil
$list.isotope({
layoutMode : 'fitRows',
+ masonry : {
+ columnWidth: 220,
+ },
getSortData : {
related : function( $elem ) {
return $elem.attr('data-related');
+ },
+ length : function( $elem ) {
+ return $elem.text().length;
}
}
});
@@ -105,6 +125,16 @@ layout: nil
return false;
});
+ var currentLayout = 'fitRows';
+
+ $('#layouts a').click(function(){
+ var layoutName = $(this).attr('href').slice(1);
+ $list.removeClass( currentLayout ).addClass( layoutName );
+ currentLayout = layoutName;
+ $list.isotope({ layoutMode : layoutName });
+ return false;
+ });
+
{% include option-buttons.js %}
});