-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (109 loc) · 7.96 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
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>elianscript demo page</title>
<style type="text/css">
@font-face {
font-family: ElianWideCapsLight;
src: url('./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.woff');
font-weight: normal;
}
.ewcl {
font-family: ElianWideCapsLight, sans-serif;
}
</style>
<link rel="stylesheet" href="style.css"></link>
<link rel="stylesheet" href="tachyons.min.css"/>
</head>
<body class="sans-serif">
<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 ewcl 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 Wide Capitals Light, 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 Wide Capitals Light" is not a reserved name.</p>
</div>
<div class="fl w-50 ewcl 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 Wide Capitals Light, 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 Wide Capitals Light" is not a reserved name.</p>
</div>
</section>
<section class="cf">
<div class="fl w-100 tl pa1">
<p class="flex items-center justify-center">
<a class="f5 ma1 no-underline black bg-animate hover-bg-green hover-white items-center pa2 ba b--green border-box" href="./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.woff">Download .woff</a>
<a class="f5 ma1 no-underline black bg-animate hover-bg-black hover-white items-center pa2 ba ba-black border-box" href="./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.ttf">.ttf</a>
<a class="f5 ma1 no-underline black bg-animate hover-bg-black hover-white items-center pa2 ba ba-black border-box" href="./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.otf">.otf</a>
</p>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<p>
Elian Wide Capitals Light is designed with the following ideas in mind:
<dl>
<dt>Horizontal capitals</dt>
<dd>The 'long' segment of second- and third-cycle characters is aligned horizontally. In the case of characters with boxes, this is done by expanding the box.</dd>
<dt>Vertical lowercase letters</dt>
<dd>With the exceptions of the lowercase k, q, r, t, and z, where possible lowercase letters have been designed to use the 'long' segment of second- and third-cycle characters is aligned vertically.</dd>
<dt>Pure geometric design</dt>
<dd>Snap-to-grid, no serifs.</dd>
<dt></dt>
<dd></dd>
</dl>
</p>
</div>
<div class="fl w-50 ewcl tl pa1 bl b--silver">
<p>
Elian Wide Capitals Light is designed with the following ideas in mind:
<dl>
<dt>Horizontal capitals</dt>
<dd>The 'long' segment of second- and third-cycle characters is aligned horizontally. In the case of characters with boxes, this is done by expanding the box.</dd>
<dt>Vertical lowercase letters</dt>
<dd>With the exceptions of the lowercase k, q, r, t, and z, where possible lowercase letters have been designed to use the 'long' segment of second- and third-cycle characters is aligned vertically.</dd>
<dt>Pure geometric design</dt>
<dd>Snap-to-grid, no serifs.</dd>
<dt></dt>
<dd></dd>
</dl>
</p>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<h3>Dingus</h3>
<p>Use this text box to see how different characters appear in the font.</p>
<script type="text/javascript">
function sync() {
var from = document.getElementById('from');
var to = document.getElementById('to');
to.innerHTML = from.innerHTML;
}
</script>
<div id="from" oninput="sync()" class="pa1 w-100 db b--black ba" contenteditable>Enter text here to see things happen.</div>
</div>
<div class="fl w-50 ewcl tl pa1 bl b--silver">
<h3>Dingus</h3>
<p>This text box displays characters entered in the other text box.</p>
<div id="to" class="pa1 w-100 db ewcl b--black ba" disabled></div>
</div>
</section>
<section class="cf">
<h3 class="fl w-100 tl pa1 duplicate-right" content="Sample Text"></h3>
<p class="fl w-100 tl pa1 duplicate-right" content="Velit ut labore ipsa sed fuga vel autem doloribus. Recusandae quia omnis earum dignissimos. Iure pariatur qui consequatur reprehenderit eos dolorem harum maxime. Qui nulla non sunt quia recusandae eaque. Qui tenetur quaerat illum voluptatem et."></p>
<p class="fl w-100 tl pa1 duplicate-right" content="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>
<p class="fl w-100 tl pa1 duplicate-right" content="Perspiciatis quibusdam et voluptas non cum consequatur velit. Aut quos rerum aspernatur dolorem architecto aperiam est. Totam sit veritatis asperiores."></p>
<p class="b fl w-100 tl pa1 duplicate-right" content="This paragraph is bolded. Elian Wide Capsitals Light does not come with built-in italic glyphs; your browser is generating them by itself."></p>
<p class="i fl w-100 tl pa1 duplicate-right" content="This paragraph is italicized. Elian Wide Capitals Light does not come with built-in italic glyphs; your browser is generating them by itself."></p>
<p class="fl w-100 tl pa1 duplicate-right" content=""></p>
</section>
</body>
</html>