51 lines
2.2 KiB
HTML
51 lines
2.2 KiB
HTML
<!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 && jumpO̶̸ver(dogeś̠̣.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> |