-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (113 loc) · 7.32 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Typepicter</title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/typepicter.css" />
<style>
.tree {
white-space: pre;
color: #888;
font-size: 0.6rem;
overflow: hidden;
margin-top: 2rem;
}
.flower {
color: pink;
}
@media only screen and (min-width: 25em) {
.tree {
font-size: 0.8rem;
}
}
@media only screen and (min-width: 36em) {
.tree {
font-size: 1.2rem;
}
}
@media only screen and (min-width: 53em) {
.tree {
font-size: 1.5rem;
}
}
.create {
height: 15rem;
padding: 3rem;
width: 100%;
}
textarea {
border: 1px solid #999999;
width: 100%;
margin: 5px 0;
padding: 3px;
height: 30rem;
}
</style>
</head>
<body class="bg-color">
<header class="header">
<h1 class="center">Typepicter</h1>
<h3 class="center serif">A font that imitates the Uwasa Imperial Typepicter</h3>
<div class="center bold yellow">By Morten Høfft - March 1, 2014</div>
</header>
<div class="content">
<p class="center">
<a href="http://mortenhofft.github.io/typepicter/">Read more</a> or download the font at <a href="https://github.com/MortenHofft/Typepicter">GitHub</a>
</p>
<div class="icon- tree">
r<span class="flower">t</span>
<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>r<span class="flower">t</span>
<span class="flower">t</span><span class="flower">t</span> r <span class="flower">t</span> <span class="flower">t</span>
<span class="flower">t</span> r<span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span>
<span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> r<span class="flower">t</span><span class="flower">t</span>
<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>E <span class="flower">t</span>r <span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span>
<span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>r<span class="flower">t</span> r<span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>
<span class="flower">t</span> <span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>w<span class="flower">t</span>
<span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span> <span class="flower">t</span>r <span class="flower">t</span><span class="flower">t</span> q<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>r<span class="flower">t</span>r
y r r<span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> r<span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>
<span class="flower">t</span> r<span class="flower">t</span>r<span class="flower">t</span> W<span class="flower">t</span><span class="flower">t</span> qr<span class="flower">t</span><span class="flower">t</span>rr<span class="flower">t</span> <span class="flower">t</span>
<span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span>r <span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>r<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>qr
<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span> r qq<span class="flower">t</span><span class="flower">t</span><span class="flower">t</span><span class="flower">t</span>q<span class="flower">t</span> <span class="flower">t</span>W
<span class="flower">t</span>W<span class="flower">t</span> y qqr<span class="flower">t</span><span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span>
<span class="flower">t</span>r<span class="flower">t</span> y qqq<span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span>E<span class="flower">t</span>
y <span class="flower">t</span> w<span class="flower">t</span> E qq<span class="flower">t</span>r <span class="flower">t</span>
e<span class="flower">t</span> <span class="flower">t</span><span class="flower">t</span> qqq<span class="flower">t</span>W<span class="flower">t</span> y
<span class="flower">t</span><span class="flower">t</span> qqq <span class="flower">t</span><span class="flower">t</span>
y qq y e
y y qqq <span class="flower">t</span><span class="flower">t</span>
y qqqq
qqqqqq
</div>
<p class="divider">Try it using qwerty</p>
<textarea class="icon- tree">
qwerty
T
tt
tt ttt tt T
trttr retttrtt
ttWtttt t ttttt
t tttt tRttttrt
tt ttq ttt ttr ttt
y tqtrtt ttt T
qq Ett
qq ttrt y
y qq t
qq y
qq y
qqqq
</textarea>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-48466800-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>