-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (170 loc) · 9.1 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Aurebesh Font">
<meta name="author" content="Vino Rodrigues">
<title>Aurebesh Font</title>
<link rel="canonical" href="https://vinorodrigues.github.io/font-aurebesh/">
<!-- Bootstrap, FontAwesome and Aurebesh CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<link href="dist/Aurebesh.css" rel="stylesheet" id="FontCSS"><!-- id used for Ligature toggle -->
<!-- Stuff -->
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#eeeeee" media="(prefers-color-scheme: dark)">
<!-- Favicons -->
<link rel="icon" href="docs/favicon.svg" type="image/svg+xml">
<!-- Aurebesh Font -->
<style type="text/css">
.b {
font-weight: bold;
}
.i {
font-style: italic;
}
body.page .translate,
.aurebesh {
font-family: Aurebesh, var(--bs-body-font-family);
}
body.page.aurebesh .translate,
.reset {
font-family: var(--bs-body-font-family);
}
.nobg {
background-color: transparent !important;
}
body.aurebesh .phold::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-family: Aurebesh, var(--bs-body-font-family);
}
body.aurebesh .phold::-moz-placeholder { /* Firefox 19+ */
font-family: Aurebesh, var(--bs-body-font-family);
}
body.aurebesh .phold:-ms-input-placeholder { /* IE 10+ */
font-family: Aurebesh, var(--bs-body-font-family);
}
body.aurebesh .phold:-moz-placeholder { /* Firefox 18- */
font-family: Aurebesh, var(--bs-body-font-family);
}
#theIcon {
fill: rgb(var(--bs-primary-rgb)) !important;
}
body .liga-sep {
display: none;
}
body .liga-on,
body.liga .liga-off {
display: inline;
}
body.liga .liga-on,
body .liga-off {
display: none;
}
body.safari .no-safari {
display: none !important;
}
.btn-2x {
min-height: 4em;
}
</style>
</head>
<body class="page aurebesh liga">
<div class="col-lg-8 mx-auto p-3 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="https://vinorodrigues.github.io/font-aurebesh" class="d-flex align-items-center text-primary text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 576 512"><title>Aurebesh Font</title><path id="theIcon" d="M528 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm8 336c0 4.411-3.589 8-8 8H48c-4.411 0-8-3.589-8-8V112c0-4.411 3.589-8 8-8h480c4.411 0 8 3.589 8 8v288zM170 270v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm-336 82v-28c0-6.627-5.373-12-12-12H82c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm384 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zM122 188v-28c0-6.627-5.373-12-12-12H82c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm-98 158v-16c0-6.627-5.373-12-12-12H180c-6.627 0-12 5.373-12 12v16c0 6.627 5.373 12 12 12h216c6.627 0 12-5.373 12-12z"/></svg>
<span class="fs-1 b">Aurebesh Font</span>
</a>
</header>
<main>
<h1 class="h2">Download the Font</h1>
<div class="row">
<p class="fs-5 col-md-12">Quickly and easily get started with the Aurebesh Font. Download the TTF (True Type Font file) and install it on your device.</p>
</div>
<div class="mb-3">
<a href="https://github.com/vinorodrigues/font-aurebesh/raw/main/dist/Aurebesh.ttf" class="btn btn-success px-4 mb-2 btn-2x"><span><i class="fa fa-download"></i> Download font<br><small>(<u>with</u> ligatures)</small></span></a>
<a href="https://github.com/vinorodrigues/font-aurebesh/raw/main/dist/AurebeshNL.ttf" class="btn btn-warning px-4 mb-2 btn-2x"><span><i class="fa fa-download"></i> Download font<br><small>(no ligatures)</small></span></a>
</div>
<h2>Test it</span></h2>
<label for="exampleIn" class="form-label">Example text</span></label>
<textarea class="form-control reset phold mb-3" id="exampleIn" rows="2" placeholder="Test it. Type in this box." oninput="UpdateOut()"></textarea>
<textarea class="form-control form-control-lg mb-3 nobg aurebesh" id="exampleOut" rows="2" readonly></textarea>
<hr class="col-3 col-md-2 mb-5">
<div class="row g-5">
<div class="col-md-6">
<h2>Open Source</h2>
<p>
<i class="fa fa-gavel"></i> This font is published under the <a href="https://github.com/vinorodrigues/font-aurebesh/blob/main/LICENSE.md" rel="noopener" target="_blank">SIL Open Font License (OFL-1.1)</a>
</p>
<p>
<i class="fa fa-github"></i> Get the <a href="https://github.com/vinorodrigues/font-aurebesh" rel="noopener" target="_blank">source on Github</a>.
</p>
</div>
<div class="col-md-6">
<h2>Contribute</h2>
<p>
<i class="fa fa-question"></i> Open source means anyone can help.
</p>
<p>
<i class="fa fa-bug"></i> Report <a href="https://github.com/vinorodrigues/font-aurebesh/issues" rel="noopener" target="_blank">issues</a>.
</p>
</div>
</div>
</main>
<footer class="pt-5 my-5 text-muted border-top">
<small class="i">This project would not have been possible without the influence of <a href="https://www.instagram.com/Andylah42542/" target="_blank">Andy Price</a> of the <a href="https://www.501scg.org/" rel="noopener" target="_blank">Southern Cross Garrison / 501<sup>st</sup> Legion</a>.</small><br>
Created with <span class="reset">♡</span> by Vino Rodrigues · © 2022
<span class="no-safari">· <a onclick="TogglelLigatures()" href="javascript:void(0);">Switch Ligatures <span class="liga-on">On</span><span class="liga-sep">/</span><span class="liga-off">Off</span></a></span><!-- swapping CSS does not work of Safari -->
· <a class="translate" onclick="DoTranslate()" href="javascript:void(0);">Translate</a>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
tx[i].addEventListener("input", OnInput, false);
}
function isSafair() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if ((ua.indexOf('chrome') > -1) | (ua.indexOf('android') > -1)) {
return false;
} else {
return true;
}
}
return false;
}
window.onload = function () {
if (isSafair()) document.body.classList.add('safari');
}
function OnInput() {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
}
function UpdateOut() {
const ot = document.getElementById('exampleOut');
ot.value = document.getElementById('exampleIn').value;
// ot.setAttribute("style", "height:" + (ot.scrollHeight) + "px;overflow-y:hidden;");
ot.style.height = "auto";
ot.style.height = (ot.scrollHeight) + "px";
}
function DoTranslate() {
document.body.classList.toggle("aurebesh");
}
function TogglelLigatures() {
const liga = document.body.classList.contains('liga');
if (liga) {
document.body.classList.remove('liga');
document.getElementById("FontCSS").href = 'dist/AurebeshNL.css';
} else {
document.body.classList.add('liga');
document.getElementById("FontCSS").href = 'dist/Aurebesh.css';
}
}
</script>
</body>
</html>