html : clean sort

_layouts/elements.html

@@ -40,25 +40,34 @@
     </ul>
 
 
-    <h3>Sort Ascending</h3>
+    <h3>Sort</h3>
-
-    <ul id="sort-asc" class="sort asc option-set floated clearfix">
-      <li><a href="#original-order" class="selected">original-order asc</a></li>
-      <li><a href="#name">name asc</a></li>
-      <li><a href="#symbol">symbol asc</a></li>
-      <li><a href="#number">number asc</a></li>
-      <li><a href="#weight">weight asc</a></li>
-      <li><a href="#category">category asc</a></li>
-    </ul>
     
-    <ul id="sort-desc" class="sort desc option-set floated clearfix">
+    <ul id="sort" class="sort option-set">
-      <li><a href="#original-order">original-order desc</a></li>
+      <li>
-      <li><a href="#name">name desc</a></li>
+        <ul class="sort asc option-set floated clearfix">
-      <li><a href="#symbol">symbol desc</a></li>
+          <li><a href="#original-order" class="selected">original-order (asc)</a></li>
-      <li><a href="#number">number desc</a></li>
+          <li><a href="#name">name (asc)</a></li>
-      <li><a href="#weight">weight desc</a></li>
+          <li><a href="#symbol">symbol (asc)</a></li>
-      <li><a href="#category">category desc</a></li>
+          <li><a href="#number">number (asc)</a></li>
+          <li><a href="#weight">weight (asc)</a></li>
+          <li><a href="#category">category (asc)</a></li>
+        </ul>
+      </li>
+      <li>
+        <ul class="sort desc option-set floated clearfix">
+          <li><a href="#original-order">original-order (desc)</a></li>
+          <li><a href="#name">name (desc)</a></li>
+          <li><a href="#symbol">symbol (desc)</a></li>
+          <li><a href="#number">number (desc)</a></li>
+          <li><a href="#weight">weight (desc)</a></li>
+          <li><a href="#category">category (desc)</a></li>
         </ul>
+      </li>
+    </ul>
+
+
+
+
 
     <h3>Layouts</h3>
   
@@ -167,7 +176,7 @@
         return false;
       });
 
-      $('.sort a').click(function(){
+      $('#sort a').click(function(){
         // get href attribute, minus the #
         var $this = $(this),
             sortName = $this.attr('href').slice(1),

css/style.css

@@ -245,22 +245,22 @@ body {
   font-weight: bold;
   text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
   background-image: -moz-linear-gradient(-90deg, 
-    hsla( 0, 0%, 100%, 0.4 ) , 
+    hsla( 0, 0%, 100%, 0.3 ) , 
     hsla( 0, 0%, 100%, 0.0 ) 
   );
   background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
-    from( hsla( 0, 0%, 100%, 0.4 ) ), 
+    from( hsla( 0, 0%, 100%, 0.3 ) ), 
     to(   hsla( 0, 0%, 100%, 0.0 ) )
   );
     margin-bottom: 0.2em;
 }
 
 #options li a:hover {
-  background-color: #2BF;
+  background-color: #5BF;
 }
 
 #options li a:active {
-  background-color: #29D;
+  background-color: #39D;
   -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
      -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
        -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );