<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Iosevka</title>
	<style>

	</style>
	<script src="https://cdn.bootcss.com/vue/1.0.7/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/vue-resource/0.1.17/vue-resource.min.js"></script>
	<link rel="stylesheet" href="specimen.css">
	<link rel="stylesheet" href="http://maxcdn.icons8.com/fonts/icons8_win10/1.0./styles.min.css">

</head>

<body>
	<div id="picker">
		<span class="title pp {{current.cls}}">Iosevka {{current.display}} Specimen<span class="icon icons8-angle-down"></span></span>
		<div class="menu">
			<div class="group" v-for="group in fonts">
				<a href="#" v-for="item in group" v-on:click.prevent="choose(item)" class="pp {{item.cls}} {{item === current ? 'active' : ''}}">{{item.display}}</a>
			</div>
		</div>
	</div>
	<div id="display">
		<div id="waiting" v-show="(!!waiting)"></div>
		<div class="show {{currentFont.cls}}">
			<p class="waterfall" v-for="size in waterfall" style="font-size:{{size / 14}}rem">float Fox.quick(h){!isBrown &amp;&amp; jumpO&#x0336;&#x0338;ver(doges&#x0320;&#x0323;&#x0301;.lazy)}</p>
			<p class="lipsum" v-for="item in lipsums">{{item}}</p>
			<pre class="langs"><code class=patel><span class=keyword>define</span> samples : <span class=keyword>object</span><template v-for="sample in samples">
    {<span class=qualifier>.lang</span> <span class=string>'{{sample.lang}}'</span>{{sample.spaces}}<span class=qualifier>.sample</span> <span class=string lang="{{sample.code}}">'{{{sample.sample}}}'</span>}<span class=comment>{{sample.comment}}</span></template></code></pre>
		</div>
		<div class="usheet show {{block.font.cls}}" v-for="block in blocks" track-by="$index">
			<h3><span>{{block.name}}</span></h3>
			<table class="block">
				<tr class="row" v-for="row in block.rows">
					<td class="indicator"><s>x</s>
						<n>U+{{row.startIndex}}</n>
					</td>
					<td v-for="char in row.chars" class="{{char.name ? 'present' : 'missing'}}" title="{{char.name}}">
						<d class="{{(char.isMark ? 'mark' : char.isTie ? 'tie' : 'simple')}}">{{char.char}}</d>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<script src="specimen.js"></script>
</body>

</html>