<html>
	<head>
		<title><%= fontName %></title>

		<link rel="stylesheet/less" type="text/css" href="less/sample.less?cache=<%= timestamp %>">
		<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>
		<style>
			body { font-family: Gill Sans; text-align: center; background: #f7f7f7 }
			body > h1 { color: #666; margin: 1em 0 }
			.glyph { padding: 0 }
			.glyph > li { display: inline-block; margin: .3em .2em; width: 5em; height: 6.5em; background: #fff; border-radius: .5em; position: relative }
			.glyph > li span:first-child { display: block; margin-top: .1em; font-size: 4em; }
			.glyph-name { font-size: .8em; color: #999; display: block }
			.glyph-codepoint { color: #999; font-family: monospace }
		</style>
	</head>
	<body>
		<h1><%= fontName %></h1>
		<ul class="glyph"><% _.each(glyphs, function(glyph) { %>
			<li>
				<span class="<%= className %> <%= className %>-<%= glyph.name.replace(/^.*CS5_/g, '') %>"></span>
				<span class="glyph-name"><%= glyph.name.replace(/^.*CS5_/g, '') %></span>
				<span class="glyph-codepoint"><%= glyph.codepoint.toString(16).toUpperCase() %></span>
			</li><% }); %>
		</ul>
	</body>
</html>