re-organize cheatsheet

Author: Adam Bradley

builder/cheatsheet/icon-row.html

@@ -1,51 +1,36 @@
 <div class="icon-row">
-  <div class="preview-icon">
-    <span class="step size-12">
+  <div class="preview-icon"><span class="step size-12">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-14">
+    </span><span class="step size-14">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-16">
+    </span><span class="step size-16">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-21">
+    </span><span class="step size-18">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-24">
+    </span><span class="step size-21">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-32">
+    </span><span class="step size-24">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-48">
+    </span><span class="step size-32">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-64">
+    </span><span class="step size-48">
       <i class="icon {{prefix}}{{name}}"></i>
-    </span>
-    <span class="step size-72">
+    </span><span class="step size-64">
+      <i class="icon {{prefix}}{{name}}"></i>
+    </span><span class="step size-72">
       <i class="icon {{prefix}}{{name}}"></i>
     </span>
   </div>
   <div class="preview-scale">
-    <span class="step">12</span>
-    <span class="step">14</span>
-    <span class="step">16</span>
-    <span class="step">21</span>
-    <span class="step">24</span>
-    <span class="step">32</span>
-    <span class="step">48</span>
-    <span class="step">64</span>
-    <span class="step">72</span>
+    <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">72</span>
   </div>
   <div class="usage">
-    <label>Selectable:</label>
-    <span class="ion">{{html_code}}</span>
-
     <label>Classname:</label>
     <input class="name" type="text" readonly="readonly" onClick="this.select();" value="{{prefix}}{{name}}" />
 
+    <label>Selectable:</label>
+    <span class="ion">{{html_code}}</span>
+
     <label>Escaped HTML:</label>
     <input class="html" type="text" readonly="readonly" onClick="this.select();" value="{{escaped_html_code}}" />
 

builder/cheatsheet/template.html

@@ -52,8 +52,8 @@
       margin: 0 auto;
       max-width: 1200px;
       min-width: 960px;
-      padding: 0 40px;
-      width: 90%;
+      padding: 0 20px;
+      width: 95%;
     }
 
     .icon-row {
@@ -98,6 +98,7 @@
     .size-12 { font-size: 12px; }
     .size-14 { font-size: 14px; }
     .size-16 { font-size: 16px; }
+    .size-18 { font-size: 18px; }
     .size-21 { font-size: 21px; }
     .size-24 { font-size: 24px; }
     .size-32 { font-size: 32px; }
@@ -122,12 +123,12 @@
     .usage label { 
       font-size: 12px; 
       text-align: right; 
-      padding: 0 5px 0 35px;
+      padding: 0 3px 0 60px;
     }
     .usage label:first-child { padding-left: 0; }
-    .usage .name { width: 200px; }
-    .usage .html { width: 100px; }
-    .usage .css { width: 100px; }
+    .usage .name { width: 180px; }
+    .usage .html { width: 80px; }
+    .usage .css { width: 80px; }
 
     footer {
       color: #888;