From d18b49da3f349cc520fc69d4977c415d47bb2142 Mon Sep 17 00:00:00 2001
From: Kevin Kirchner <kevin@classyllama.com>
Date: Wed, 14 Aug 2013 10:18:06 -0500
Subject: [PATCH] Added letters to the preview template to provide better
 context for the icons

Adding letters allows you judge quickly whether you need to redo the
icon or not. Here's a screenshot of the outcome:
http://files.classyllama.com/bc9abf9a/fontcustom_glyphs_preview_17BBD6BA
.png
---
 lib/fontcustom/templates/fontcustom-preview.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/fontcustom/templates/fontcustom-preview.html b/lib/fontcustom/templates/fontcustom-preview.html
index b89f6aad..f1184b3c 100644
--- a/lib/fontcustom/templates/fontcustom-preview.html
+++ b/lib/fontcustom/templates/fontcustom-preview.html
@@ -65,8 +65,9 @@
         width: 10%;
       }
 
-      <% scale.each do |n| %>
+      <% scale.each_with_index do |n,index| %>
       .size-<%= n %> { font-size: <%= n %>px; }
+      .step-<%= index+1 %> { width: <%= 1.5+((index.to_f+1)/0.70) %>%;}
       <% end %>
 
       .usage { margin-top: 10px; }
@@ -99,10 +100,10 @@ <h1><%= @opts[:font_name] %> contains <%= @data[:glyphs].length %> glyphs:</h1>
       <% @data[:glyphs].each_with_index do |name, index| %>
       <div class="glyph">
         <div class="preview-glyphs">
-          <% scale.each do |n| %><i class="step <%= @opts[:css_prefix] + name %> size-<%= n %>"></i><% end %>
+          <% scale.each_with_index do |n,index| %><span class="step step-<%= index+1 %> size-<%= n %>">Aa <i class="<%= @opts[:css_prefix] + name %>"></i></span><% end %>
         </div>
         <div class="preview-scale">
-          <% scale.each do |n| %><span class="step"><%= n %></span><% end %> 
+          <% scale.each_with_index do |n,index| %><span class="step step-<%= index+1 %>"><%= n %></span><% end %> 
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".<%= @opts[:css_prefix] + name %>" />