-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (89 loc) · 9.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>elianscript demo page</title>
<link rel="stylesheet" href="style.css"></link>
<link rel="stylesheet" href="tachyons.min.css"/>
<style type="text/css">
html {
line-height: 1.5;
}
@font-face {
font-family: "Elian Bitmap Serif";
src: url('./Elian Bitmap Serif.ttf')
;
font-weight: normal;
}
.ebs {
font-family: "Elian Bitmap Serif", sans-serif;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
</head>
<body class="sans-serif f5">
<section class="cf">
<div class="fl w-100 tl pa1">
<h1 class="tc ebs">Elian Bitmap Serif</h1>
<h1 class="tc ">Elian Bitmap Serif</h1>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<h1 class="tc">Latin</h1>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span></div><div class="elian-grid f3 pa1 ba b--black"><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span></div><div class="elian-grid f3 pa1 ba b--black"><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span></div></div>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span></div><div class="elian-grid f3 pa1 ba b--black"><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span></div><div class="elian-grid f3 pa1 ba b--black"><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span></div></div>
</div>
<div class="fl w-50 ebs tl pa1 bl b--silver">
<h1 class="tc">Elian</h1>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span></div><div class="elian-grid f3 pa1 ba b--black"><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span></div><div class="elian-grid f3 pa1 ba b--black"><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span></div></div>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span></div><div class="elian-grid f3 pa1 ba b--black"><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span></div><div class="elian-grid f3 pa1 ba b--black"><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span></div></div>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<p>Text on this page using glyphs from <a href="http://www.ccelian.com/ElianScriptFull.html">the Elian script</a> is formatted using Elian Bitmap Serif, a free-as-in-speech and free-as-in-beer font available under the terms of the <a href="https://en.wikipedia.org/wiki/SIL_Open_Font_License">SIL Open Font License</a>. For the purposes of that license, "Elian Bitmap Serif" is not a reserved name.</p>
</div>
<div class="fl w-50 ebs tl pa1 bl b--silver">
<p>Text on this page using glyphs from <a href="http://www.ccelian.com/ElianScriptFull.html">the Elian script</a> is formatted using Elian Bitmap Serif, a free-as-in-speech and free-as-in-beer font available under the terms of the <a href="https://en.wikipedia.org/wiki/SIL_Open_Font_License">SIL Open Font License</a>. For the purposes of that license, "Elian Bitmap Serif" is not a reserved name.</p>
</div>
</section>
<section class="cf w-50 tl pa1 pt3 bb b--black" style="margin: 0 auto;">
<p class="mw6">
<a class="f5 ma1 no-underline black bg-animate hover-bg-black hover-white items-center pa2 ba ba-black border-box" href="./Elian Bitmap Serif.ttf">Download .ttf</a>
</p>
<p class="mw6">
To use this font, first download these font files and save them to your server. Then use a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code>@font-face</code></a> declaration in your CSS to load the files from your server.
</p>
<pre class="pre f7"><code>
<style type="text/css">
@font-face {
font-family: "Elian Bitmap Serif"
src: url('./Elian Bitmap Serif.ttf')
;
font-weight: normal;
}
.ebs {
font-family: "Elian Bitmap Serif", sans-serif;
}
</style>
</code></pre>
<p class="mw6">This font can also be used on computers that support TrueType fonts.</p>
<p class="mw6">This font ("Elian Bitmap Serif") is available under the terms of the SIL Open Font License; for more information see <a href="https://github.com/benlk/elian-bitmap-serif">the font's Github repository</a>. Contributions and suggestions are welcome; please see <a href="https://github.com/benlk/elian-bitmap-serif/blob/master/CONTRIBUTING.md">the contributing guide</a> for more information.</p>
</section>
<section class="cf w-50 pt3" style="margin: 0 auto;">
<label class="toggle-ebs pa3 bg-dark-green w-100 db border-box white mt4" for="toggle-ebs">Toggle this box to toggle Elian font use below</label>
<input type="checkbox" id="toggle-ebs" class="toggle-ebs">
<div class="tl pa1 ebs select-plain">
<h3 class="tc">Try it out!</h3>
<div id="from" class="pa1 w-100 db b--black ba" contenteditable>This text field is editable. Type away here to see what happens.</div>
<h3 class="tc">A big block of Latin</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis risus at lacinia dignissim. Maecenas ac eros efficitur, vehicula nisi in, ullamcorper lectus. Pellentesque hendrerit odio libero, at rutrum est consectetur sit amet. Nulla consequat iaculis augue ut maximus. Curabitur tellus diam, vestibulum tempus mattis ut, placerat ac elit. Maecenas fermentum blandit porttitor. Phasellus rhoncus sem efficitur congue sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed iaculis elit eu lacus congue cursus. Curabitur cursus justo ut quam cursus, sed maximus dui venenatis. Nullam auctor nulla eleifend enim maximus, a pretium augue pulvinar. Nulla facilisi. Donec scelerisque condimentum tellus non congue. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Sed pharetra lacus sem, at auctor eros fermentum eu. Praesent condimentum nulla ac egestas pulvinar. Nunc consequat, augue ac volutpat tincidunt, massa sem feugiat ex, vel rutrum ante elit sed elit. Fusce pretium convallis leo, id gravida orci pharetra vitae. Phasellus tincidunt et arcu nec iaculis. Donec efficitur semper lorem consequat pellentesque. Etiam sodales tristique urna vel egestas. Aenean lobortis arcu ligula, vitae lacinia mauris tempus vitae. Nam iaculis tincidunt posuere. Suspendisse at mollis nisi.</p>
<p>Fusce auctor, erat vel tempor pharetra, leo nisl varius lectus, eu lobortis tortor massa eu nunc. Vivamus eu sagittis neque. Vivamus a elit id lacus mattis imperdiet. Donec odio magna, laoreet id suscipit nec, tempor quis nisi. Duis dignissim est leo, nec convallis enim vehicula ut. Quisque nec metus imperdiet, egestas mauris nec, posuere velit. Fusce sed rhoncus erat. Curabitur quis feugiat dolor, ut porta ante. Nunc eget enim nec risus posuere euismod et quis tellus. Aliquam dictum, ipsum in aliquet facilisis, nisi felis luctus purus, ac aliquam velit nisi vel purus. Donec enim metus, accumsan in pretium non, ullamcorper at felis.</p>
<p>Integer dignissim tincidunt mi, ut efficitur sem pretium condimentum. Nullam metus ipsum, congue vel sapien tempus, sodales posuere enim. Sed sed nulla quis ipsum finibus pellentesque. Proin ut convallis neque. Curabitur a ipsum risus. Vivamus vel auctor purus. Integer suscipit magna velit, vel aliquam nunc posuere et. Quisque ornare mauris mi, sit amet gravida sapien feugiat in. Vivamus eget tempor ligula. Etiam placerat ligula ut nunc vehicula semper. Morbi at mi nec justo tempus elementum. Vivamus maximus, erat a porttitor laoreet, velit sapien feugiat leo, nec sodales felis quam a nunc.</p>
<p>Donec vitae est vel dolor tincidunt consequat. Duis sit amet dolor lacus. Proin venenatis bibendum vestibulum. Sed sed justo porttitor, sodales ipsum et, commodo mi. Duis non vestibulum turpis. Etiam quis scelerisque sem, non varius nunc. Ut scelerisque ex tristique felis blandit dapibus. Nam sit amet urna volutpat, maximus quam a, cursus tortor. Sed et rutrum tellus, elementum maximus nulla. Proin fringilla risus a orci viverra, non tempus justo convallis. Praesent consequat nisl nisl, vel sodales enim ornare vel. Nunc semper ipsum augue, sit amet accumsan velit venenatis eu. Mauris vel tortor sit amet ante vestibulum tincidunt. Phasellus lectus arcu, lobortis ut nibh quis, laoreet fringilla felis. Nam eleifend, elit quis tempor laoreet, tortor eros laoreet magna, quis mollis sem diam sed orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p class="" >Asperiores nam saepe et architecto excepturi dicta eaque reiciendis. Inventore eos veritatis ut aliquid quae earum soluta iste. Tempore dicta illo libero eum eos et illo. Sequi eum qui dolore qui voluptas voluptatibus tenetur. Accusamus deserunt eum accusantium aliquam id ipsum minus consequuntur.</p>
</div>
</section>
</body>
</html>