Bryan Elliott
3 years ago
committed by
GitHub
4 changed files with 165 additions and 0 deletions
@ -0,0 +1,138 @@ |
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||||||
|
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
||||||
|
<head> |
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
|
|
||||||
|
<style type="text/css"> |
||||||
|
@font-face { |
||||||
|
font-family: 'mawkin_sansregular'; |
||||||
|
src: url('./mawkin_sans.woff2') format('woff2'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
html, body, div, span, applet, object, iframe, |
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||||
|
a, abbr, acronym, address, big, cite, code, |
||||||
|
del, dfn, em, font, img, ins, kbd, q, s, samp, |
||||||
|
small, strike, strong, sub, sup, tt, var, |
||||||
|
b, u, i, center, dl, dt, dd, ol, ul, li, |
||||||
|
fieldset, form, label, legend, table, |
||||||
|
caption, tbody, tfoot, thead, tr, th, td |
||||||
|
{margin: 0;padding: 0;border: 0;outline: 0; |
||||||
|
font-size: 100%;vertical-align: baseline; |
||||||
|
background: transparent;} |
||||||
|
body {line-height: 1;} |
||||||
|
ol, ul {list-style: none;} |
||||||
|
blockquote, q {quotes: none;} |
||||||
|
blockquote:before, blockquote:after, |
||||||
|
q:before, q:after {content: ''; content: none;} |
||||||
|
:focus {outline: 0;} |
||||||
|
ins {text-decoration: none;} |
||||||
|
del {text-decoration: line-through;} |
||||||
|
table {border-collapse: collapse;border-spacing: 0;} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body { |
||||||
|
color: #000; |
||||||
|
background-color: #dcdcdc; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#container { |
||||||
|
width: 865px; |
||||||
|
margin: 0px auto; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#main_content { |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px 20px 20px; |
||||||
|
} |
||||||
|
#mawkin { |
||||||
|
font-family: 'mawkin_sansregular'; |
||||||
|
} |
||||||
|
#transcript, #mawkin { |
||||||
|
width: 100%; |
||||||
|
height: 4em; |
||||||
|
font-size: 24pt; |
||||||
|
} |
||||||
|
#specimen { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
glyph { |
||||||
|
flex: 0 0 auto; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 1em; |
||||||
|
font-size: 12pt; |
||||||
|
} |
||||||
|
glyph:before { |
||||||
|
content: '.' attr(map); |
||||||
|
width: 75pt; |
||||||
|
font-family: 'mawkin_sansregular'; |
||||||
|
font-size: 72pt; |
||||||
|
padding: 0 0 0.125em; |
||||||
|
} |
||||||
|
glyph:after { |
||||||
|
content: attr(map); |
||||||
|
font-family: Arial; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<title>Mawkin Sans Reference</title> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<div id="container"> |
||||||
|
<div id="main_content"> |
||||||
|
<div id="specimen"> |
||||||
|
|
||||||
|
<glyph map="A"></glyph> |
||||||
|
<glyph map="B"></glyph> |
||||||
|
<glyph map="C"></glyph> |
||||||
|
<glyph map="D"></glyph> |
||||||
|
<glyph map="E"></glyph> |
||||||
|
<glyph map="F"></glyph> |
||||||
|
<glyph map="G"></glyph> |
||||||
|
<glyph map="H"></glyph> |
||||||
|
<glyph map="I"></glyph> |
||||||
|
<glyph map="J"></glyph> |
||||||
|
<glyph map="K"></glyph> |
||||||
|
<glyph map="L"></glyph> |
||||||
|
<glyph map="M"></glyph> |
||||||
|
<glyph map="N"></glyph> |
||||||
|
<glyph map="O"></glyph> |
||||||
|
<glyph map="P"></glyph> |
||||||
|
<glyph map="Q"></glyph> |
||||||
|
<glyph map="R"></glyph> |
||||||
|
<glyph map="S"></glyph> |
||||||
|
<glyph map="T"></glyph> |
||||||
|
<glyph map="U"></glyph> |
||||||
|
<glyph map="V"></glyph> |
||||||
|
<glyph map="W"></glyph> |
||||||
|
<glyph map="X"></glyph> |
||||||
|
<glyph map="Y"></glyph> |
||||||
|
<glyph map="Z"></glyph> |
||||||
|
</div> |
||||||
|
<textarea id="transcript"></textarea> |
||||||
|
<textarea readonly id="mawkin"></textarea> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
(() => { |
||||||
|
const [transcript, mawkin] = ['transcript', 'mawkin'].map(id => document.getElementById(id)); |
||||||
|
transcript.value = mawkin.value = localStorage.getItem('lastValue'); |
||||||
|
transcript.addEventListener('keyup', () => { |
||||||
|
localStorage.setItem('lastValue', mawkin.value = transcript.value); |
||||||
|
}); |
||||||
|
})(); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Binary file not shown.
Loading…
Reference in new issue