-
Notifications
You must be signed in to change notification settings - Fork 111
/
stately.html
229 lines (229 loc) · 8.67 KB
/
stately.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stately | The simple map font</title>
<meta name="description" content="Stately | The simple map font">
<meta name="author" content="Ben Markowitz">
<link rel="stylesheet" href="assets/css/screen.css?v=1.0">
<link rel="stylesheet" href="assets/css/stately.css?v=1.0">
</head>
<body>
<h1>Plain</h1>
<ul class="stately" id="plain">
<li data-state="al" class="al">A</li>
<li data-state="ak" class="ak">B</li>
<li data-state="ar" class="ar">C</li>
<li data-state="az" class="az">D</li>
<li data-state="ca" class="ca">E</li>
<li data-state="co" class="co">F</li>
<li data-state="ct" class="ct">G</li>
<li data-state="de" class="de">H</li>
<li data-state="dc" class="dc">I</li>
<li data-state="fl" class="fl">J</li>
<li data-state="ga" class="ga">K</li>
<li data-state="hi" class="hi">L</li>
<li data-state="id" class="id">M</li>
<li data-state="il" class="il">N</li>
<li data-state="in" class="in">O</li>
<li data-state="ia" class="ia">P</li>
<li data-state="ks" class="ks">Q</li>
<li data-state="ky" class="ky">R</li>
<li data-state="la" class="la">S</li>
<li data-state="me" class="me">T</li>
<li data-state="md" class="md">U</li>
<li data-state="ma" class="ma">V</li>
<li data-state="mi" class="mi">W</li>
<li data-state="mn" class="mn">X</li>
<li data-state="ms" class="ms">Y</li>
<li data-state="mo" class="mo">Z</li>
<li data-state="mt" class="mt">a</li>
<li data-state="ne" class="ne">b</li>
<li data-state="nv" class="nv">c</li>
<li data-state="nh" class="nh">d</li>
<li data-state="nj" class="nj">e</li>
<li data-state="nm" class="nm">f</li>
<li data-state="ny" class="ny">g</li>
<li data-state="nc" class="nc">h</li>
<li data-state="nd" class="nd">i</li>
<li data-state="oh" class="oh">j</li>
<li data-state="ok" class="ok">k</li>
<li data-state="or" class="or">l</li>
<li data-state="pa" class="pa">m</li>
<li data-state="ri" class="ri">n</li>
<li data-state="sc" class="sc">o</li>
<li data-state="sd" class="sd">p</li>
<li data-state="tn" class="tn">q</li>
<li data-state="tx" class="tx">r</li>
<li data-state="ut" class="ut">s</li>
<li data-state="va" class="va">t</li>
<li data-state="vt" class="vt">u</li>
<li data-state="wa" class="wa">v</li>
<li data-state="wv" class="wv">w</li>
<li data-state="wi" class="wi">x</li>
<li data-state="wy" class="wy">y</li>
</ul>
<h1>Intrideans</h1>
<ul class="stately" id="intrideans">
<li data-state="al" class="al">A</li>
<li data-state="ak" class="ak">B</li>
<li data-state="ar" class="ar">C</li>
<li data-state="az" class="az">D</li>
<li data-state="ca" class="ca">E</li>
<li data-state="co" class="co">F</li>
<li data-state="ct" class="ct">G</li>
<li data-state="de" class="de">H</li>
<li data-state="dc" class="dc">I</li>
<li data-state="fl" class="fl">J</li>
<li data-state="ga" class="ga">K</li>
<li data-state="hi" class="hi">L</li>
<li data-state="id" class="id">M</li>
<li data-state="il" class="il">N</li>
<li data-state="in" class="in">O</li>
<li data-state="ia" class="ia">P</li>
<li data-state="ks" class="ks">Q</li>
<li data-state="ky" class="ky">R</li>
<li data-state="la" class="la">S</li>
<li data-state="me" class="me">T</li>
<li data-state="md" class="md">U</li>
<li data-state="ma" class="ma">V</li>
<li data-state="mi" class="mi">W</li>
<li data-state="mn" class="mn">X</li>
<li data-state="ms" class="ms">Y</li>
<li data-state="mo" class="mo">Z</li>
<li data-state="mt" class="mt">a</li>
<li data-state="ne" class="ne">b</li>
<li data-state="nv" class="nv">c</li>
<li data-state="nh" class="nh">d</li>
<li data-state="nj" class="nj">e</li>
<li data-state="nm" class="nm">f</li>
<li data-state="ny" class="ny">g</li>
<li data-state="nc" class="nc">h</li>
<li data-state="nd" class="nd">i</li>
<li data-state="oh" class="oh">j</li>
<li data-state="ok" class="ok">k</li>
<li data-state="or" class="or">l</li>
<li data-state="pa" class="pa">m</li>
<li data-state="ri" class="ri">n</li>
<li data-state="sc" class="sc">o</li>
<li data-state="sd" class="sd">p</li>
<li data-state="tn" class="tn">q</li>
<li data-state="tx" class="tx">r</li>
<li data-state="ut" class="ut">s</li>
<li data-state="va" class="va">t</li>
<li data-state="vt" class="vt">u</li>
<li data-state="wa" class="wa">v</li>
<li data-state="wv" class="wv">w</li>
<li data-state="wi" class="wi">x</li>
<li data-state="wy" class="wy">y</li>
</ul>
<h1>2012 Presidential Election</h1>
<ul class="stately" id="election">
<li data-state="al" class="al">A</li>
<li data-state="ak" class="ak">B</li>
<li data-state="ar" class="ar">C</li>
<li data-state="az" class="az">D</li>
<li data-state="ca" class="ca">E</li>
<li data-state="co" class="co">F</li>
<li data-state="ct" class="ct">G</li>
<li data-state="de" class="de">H</li>
<li data-state="dc" class="dc">I</li>
<li data-state="fl" class="fl">J</li>
<li data-state="ga" class="ga">K</li>
<li data-state="hi" class="hi">L</li>
<li data-state="id" class="id">M</li>
<li data-state="il" class="il">N</li>
<li data-state="in" class="in">O</li>
<li data-state="ia" class="ia">P</li>
<li data-state="ks" class="ks">Q</li>
<li data-state="ky" class="ky">R</li>
<li data-state="la" class="la">S</li>
<li data-state="me" class="me">T</li>
<li data-state="md" class="md">U</li>
<li data-state="ma" class="ma">V</li>
<li data-state="mi" class="mi">W</li>
<li data-state="mn" class="mn">X</li>
<li data-state="ms" class="ms">Y</li>
<li data-state="mo" class="mo">Z</li>
<li data-state="mt" class="mt">a</li>
<li data-state="ne" class="ne">b</li>
<li data-state="nv" class="nv">c</li>
<li data-state="nh" class="nh">d</li>
<li data-state="nj" class="nj">e</li>
<li data-state="nm" class="nm">f</li>
<li data-state="ny" class="ny">g</li>
<li data-state="nc" class="nc">h</li>
<li data-state="nd" class="nd">i</li>
<li data-state="oh" class="oh">j</li>
<li data-state="ok" class="ok">k</li>
<li data-state="or" class="or">l</li>
<li data-state="pa" class="pa">m</li>
<li data-state="ri" class="ri">n</li>
<li data-state="sc" class="sc">o</li>
<li data-state="sd" class="sd">p</li>
<li data-state="tn" class="tn">q</li>
<li data-state="tx" class="tx">r</li>
<li data-state="ut" class="ut">s</li>
<li data-state="va" class="va">t</li>
<li data-state="vt" class="vt">u</li>
<li data-state="wa" class="wa">v</li>
<li data-state="wv" class="wv">w</li>
<li data-state="wi" class="wi">x</li>
<li data-state="wy" class="wy">y</li>
</ul>
<h1>Presidential Birth States</h1>
<ul class="stately" id="presidents">
<li data-state="al" class="al">A</li>
<li data-state="ak" class="ak">B</li>
<li data-state="ar" class="ar">C</li>
<li data-state="az" class="az">D</li>
<li data-state="ca" class="ca">E</li>
<li data-state="co" class="co">F</li>
<li data-state="ct" class="ct">G</li>
<li data-state="de" class="de">H</li>
<li data-state="dc" class="dc">I</li>
<li data-state="fl" class="fl">J</li>
<li data-state="ga" class="ga">K</li>
<li data-state="hi" class="hi">L</li>
<li data-state="id" class="id">M</li>
<li data-state="il" class="il">N</li>
<li data-state="in" class="in">O</li>
<li data-state="ia" class="ia">P</li>
<li data-state="ks" class="ks">Q</li>
<li data-state="ky" class="ky">R</li>
<li data-state="la" class="la">S</li>
<li data-state="me" class="me">T</li>
<li data-state="md" class="md">U</li>
<li data-state="ma" class="ma">V</li>
<li data-state="mi" class="mi">W</li>
<li data-state="mn" class="mn">X</li>
<li data-state="ms" class="ms">Y</li>
<li data-state="mo" class="mo">Z</li>
<li data-state="mt" class="mt">a</li>
<li data-state="ne" class="ne">b</li>
<li data-state="nv" class="nv">c</li>
<li data-state="nh" class="nh">d</li>
<li data-state="nj" class="nj">e</li>
<li data-state="nm" class="nm">f</li>
<li data-state="ny" class="ny">g</li>
<li data-state="nc" class="nc">h</li>
<li data-state="nd" class="nd">i</li>
<li data-state="oh" class="oh">j</li>
<li data-state="ok" class="ok">k</li>
<li data-state="or" class="or">l</li>
<li data-state="pa" class="pa">m</li>
<li data-state="ri" class="ri">n</li>
<li data-state="sc" class="sc">o</li>
<li data-state="sd" class="sd">p</li>
<li data-state="tn" class="tn">q</li>
<li data-state="tx" class="tx">r</li>
<li data-state="ut" class="ut">s</li>
<li data-state="va" class="va">t</li>
<li data-state="vt" class="vt">u</li>
<li data-state="wa" class="wa">v</li>
<li data-state="wv" class="wv">w</li>
<li data-state="wi" class="wi">x</li>
<li data-state="wy" class="wy">y</li>
</ul>
</body>
</html>