Added fixed width to examples page

bower_components/keyrune/.bower.json

@@ -18,11 +18,11 @@
     "*.json",
     "*.md"
   ],
-  "_release": "cb8a2fa161",
+  "_release": "f899d84794",
   "_resolution": {
     "type": "branch",
     "branch": "master",
-    "commit": "cb8a2fa16152cc833f8cc2d71f617dd96ac3eac1"
+    "commit": "f899d84794bc720b1fb5cec5ecd0c96ad988beb5"
   },
   "_source": "git://github.com/andrewgioia/keyrune.git",
   "_target": "*",

bower_components/keyrune/css/keyrune.css

@@ -52,6 +52,12 @@
 .ss-mythic {
   color: #A2472A;
 }
+/**
+ * Fixed width */
+.ss-fw {
+  width: 1.28571429em;
+  text-align: center;
+}
 /**
  * Core */
 .ss-lea:before {

bower_components/keyrune/less/keyrune.less

@@ -3,4 +3,5 @@
 @import "core.less";
 @import "sizes.less";
 @import "rarities.less";
+@import "width.less";
 @import "icons.less";

bower_components/keyrune/less/width.less

@@ -0,0 +1,7 @@
+/**
+ * Fixed width */
+
+.@{prefix}-fw {
+    width: (18em / 14);
+    text-align: center;
+}

css/main.css

@@ -254,6 +254,7 @@ blockquote {
 
     .example .each {
         display: block;
+        padding-bottom: 2px;
     }
 
 .explanation {

examples.html

@@ -77,6 +77,25 @@
                 </div>
                 <div class="clear"></div>
             </section>
+            <section class="content">
+                <h4>Fixed Width</h4>
+                <div class="example float-left">
+                    <div style="padding-bottom: 5px;">Fixed width:</div>
+                    <span class="each"><i class="ss ss-inv ss-fw"></i> Invasion</span>
+                    <span class="each"><i class="ss ss-nms ss-fw"></i> Nemesis</span>
+                    <div style="padding: 15px 0 5px;">Default (to compare):</div>
+                    <span class="each"><i class="ss ss-inv"></i> Invasion</span>
+                    <span class="each"><i class="ss ss-nms"></i> Nemesis</span>
+                </div>
+                <div class="explanation">
+                    <p>All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class <code>.ss-fw</code> and the set symbols will have a constant width and centered icon.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-inv ss-fw"</span>&gt;&lt;/<span class="a">i</span>&gt; Invasion<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-nms ss-fw"</span>&gt;&lt;/<span class="a">i</span>&gt; Nemesis
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
             <section class="content">
                 <h4>Rarity Colors</h4>
                 <div class="example float-left">