blob: 79512a0269b2a27daf68554f02bfb5d06fd73664 (
plain)
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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
|
<!DOCTYPE html>
<title>Rommel in the Desert - Unit Appearance</title>
<link rel="stylesheet" href="/fonts/fonts.css">
<style>
body {
background-color: slategray;
font-family: "Source Sans";
margin: 40px auto;
max-width: 736px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 24px;
}
.unit {
width: 51px;
height: 51px;
background-repeat: no-repeat;
border-style: solid;
border-width: 4px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
background-image: url(../units.svg);
}
.unit.italian {
background-color: #f9e3b3;
border-color: hsl(80, 20%, 50%);
}
.unit.german {
background-color: #abba8e;
border-color: hsl(80, 20%, 50%);
}
.unit.allied {
background-color: #e4d1ab;
border-color: hsl(35, 40%, 50%);
}
h2 {
font-size: 20px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0 12px;
color: #0008;
background-image: linear-gradient(to right, #fff8, #fff3);
}
.unit.u0{background-position:-0px -0px}
.unit.u1{background-position:-51px -0px}
.unit.u2{background-position:-102px -0px}
.unit.u3{background-position:-153px -0px}
.unit.u4{background-position:-204px -0px}
.unit.u5{background-position:-255px -0px}
.unit.u6{background-position:-306px -0px}
.unit.u7{background-position:-357px -0px}
.unit.u8{background-position:-408px -0px}
.unit.u9{background-position:-459px -0px}
.unit.u10{background-position:-0px -51px}
.unit.u11{background-position:-51px -51px}
.unit.u12{background-position:-102px -51px}
.unit.u13{background-position:-153px -51px}
.unit.u14{background-position:-204px -51px}
.unit.u15{background-position:-255px -51px}
.unit.u16{background-position:-306px -51px}
.unit.u17{background-position:-357px -51px}
.unit.u18{background-position:-408px -51px}
.unit.u19{background-position:-459px -51px}
.unit.u20{background-position:-0px -102px}
.unit.u21{background-position:-51px -102px}
.unit.u22{background-position:-102px -102px}
.unit.u23{background-position:-153px -102px}
.unit.u24{background-position:-204px -102px}
.unit.u25{background-position:-255px -102px}
.unit.u26{background-position:-306px -102px}
.unit.u27{background-position:-357px -102px}
.unit.u28{background-position:-408px -102px}
.unit.u29{background-position:-459px -102px}
.unit.u30{background-position:-0px -153px}
.unit.u31{background-position:-51px -153px}
.unit.u32{background-position:-102px -153px}
.unit.u33{background-position:-153px -153px}
.unit.u34{background-position:-204px -153px}
.unit.u35{background-position:-255px -153px}
.unit.u36{background-position:-306px -153px}
.unit.u37{background-position:-357px -153px}
.unit.u38{background-position:-408px -153px}
.unit.u39{background-position:-459px -153px}
.unit.u40{background-position:-0px -204px}
.unit.u41{background-position:-51px -204px}
.unit.u42{background-position:-102px -204px}
.unit.u43{background-position:-153px -204px}
.unit.u44{background-position:-204px -204px}
.unit.u45{background-position:-255px -204px}
.unit.u46{background-position:-306px -204px}
.unit.u47{background-position:-357px -204px}
.unit.u48{background-position:-408px -204px}
.unit.u49{background-position:-459px -204px}
.unit.u50{background-position:-0px -255px}
.unit.u51{background-position:-51px -255px}
.unit.u52{background-position:-102px -255px}
.unit.u53{background-position:-153px -255px}
.unit.u54{background-position:-204px -255px}
.unit.u55{background-position:-255px -255px}
.unit.u56{background-position:-306px -255px}
.unit.u57{background-position:-357px -255px}
.unit.u58{background-position:-408px -255px}
.unit.u59{background-position:-459px -255px}
.unit.u60{background-position:-0px -306px}
.unit.u61{background-position:-51px -306px}
.unit.u62{background-position:-102px -306px}
.unit.u63{background-position:-153px -306px}
.unit.u64{background-position:-204px -306px}
.unit.u65{background-position:-255px -306px}
.unit.u66{background-position:-306px -306px}
.unit.u67{background-position:-357px -306px}
.unit.u68{background-position:-408px -306px}
.unit.u69{background-position:-459px -306px}
.unit.u70{background-position:-0px -357px}
.unit.u71{background-position:-51px -357px}
.unit.u72{background-position:-102px -357px}
.unit.u73{background-position:-153px -357px}
.unit.u74{background-position:-204px -357px}
.unit.u75{background-position:-255px -357px}
.unit.u76{background-position:-306px -357px}
.unit.u77{background-position:-357px -357px}
.unit.u78{background-position:-408px -357px}
.unit.u79{background-position:-459px -357px}
.unit.u80{background-position:-0px -408px}
.unit.u81{background-position:-51px -408px}
.unit.u82{background-position:-102px -408px}
.unit.u83{background-position:-153px -408px}
.unit.u84{background-position:-204px -408px}
.unit.u85{background-position:-255px -408px}
.unit.u86{background-position:-306px -408px}
.unit.u87{background-position:-357px -408px}
.unit.u88{background-position:-408px -408px}
.unit.u89{background-position:-459px -408px}
.unit.u90{background-position:-0px -459px}
.unit.u91{background-position:-51px -459px}
.unit.u92{background-position:-102px -459px}
.unit.u93{background-position:-153px -459px}
</style>
<html>
<body>
<div id="units">
<h2>Start</h2>
<div class="row">
<div class="unit italian u0"></div>
<div class="unit italian u5"></div>
<div class="unit italian u7"></div>
<div class="unit italian u8"></div>
<div class="unit italian u9"></div>
<div class="unit italian u10"></div>
<div class="unit italian u13"></div>
<div class="unit german u15"></div>
<div class="unit german u18"></div>
<div class="unit german u20"></div>
</div>
<div class="row">
<div class="unit allied u50"></div>
<div class="unit allied u55"></div>
<div class="unit allied u59"></div>
<div class="unit allied u60"></div>
<div class="unit allied u72"></div>
<div class="unit allied u85"></div>
</div>
<h2>Tobruk</h2>
<div class="row">
<div class="unit allied u38"></div>
<div class="unit allied u52"></div>
<div class="unit allied u53"></div>
<div class="unit allied u70"></div>
<div class="unit allied u88"></div>
<div class="unit allied u93"></div>
</div>
<h2>Malta Group</h2>
<div class="row">
<div class="unit italian u6"></div>
<div class="unit german u26"></div>
<div class="unit german u27"></div>
<div class="unit german u28"></div>
</div>
<h2>Month 2</h2>
<div class="row">
<div class="unit allied u43"></div>
<div class="unit allied u71"></div>
<div class="unit allied u76"></div>
<div class="unit allied u77"></div>
</div>
<h2>Month 3</h2>
<div class="row">
<div class="unit german u14"></div>
<div class="unit german u19"></div>
<div class="unit german u21"></div>
<div class="unit german u29"></div>
</div>
<h2>Month 4</h2>
<div class="row">
<div class="unit allied u34"></div>
<div class="unit allied u39"></div>
<div class="unit allied u40"></div>
<div class="unit allied u46"></div>
</div>
<h2>Month 5</h2>
<div class="row">
<div class="unit german u16"></div>
<div class="unit german u17"></div>
<div class="unit german u25"></div>
<div class="unit german u31"></div>
</div>
<h2>Month 6</h2>
<div class="row">
<div class="unit allied u63"></div>
<div class="unit allied u81"></div>
<div class="unit allied u82"></div>
<div class="unit allied u89"></div>
<div class="unit allied u90"></div>
<div class="unit allied u91"></div>
</div>
<h2>Month 7</h2>
<div class="row">
<div class="unit italian u2"></div>
<div class="unit italian u12"></div>
<div class="unit german u24"></div>
<div class="unit german u33"></div>
</div>
<h2>Month 8</h2>
<div class="row">
<div class="unit allied u42"></div>
<div class="unit allied u45"></div>
<div class="unit allied u69"></div>
<div class="unit allied u80"></div>
<div class="unit allied u83"></div>
<div class="unit allied u84"></div>
</div>
<h2>Month 10</h2>
<div class="row">
<div class="unit allied u41"></div>
<div class="unit allied u51"></div>
<div class="unit allied u54"></div>
<div class="unit allied u78"></div>
</div>
<h2>Month 11</h2>
<div class="row">
<div class="unit italian u1"></div>
<div class="unit german u22"></div>
<div class="unit german u23"></div>
<div class="unit german u30"></div>
</div>
<h2>Month 12</h2>
<div class="row">
<div class="unit allied u37"></div>
<div class="unit allied u64"></div>
</div>
<h2>Month 14</h2>
<div class="row">
<div class="unit allied u66"></div>
<div class="unit allied u73"></div>
<div class="unit allied u74"></div>
<div class="unit allied u75"></div>
<div class="unit allied u79"></div>
<div class="unit allied u92"></div>
</div>
<h2>Month 16</h2>
<div class="row">
<div class="unit allied u44"></div>
<div class="unit allied u49"></div>
<div class="unit allied u56"></div>
<div class="unit allied u61"></div>
<div class="unit allied u86"></div>
<div class="unit allied u87"></div>
</div>
<h2>Month 17</h2>
<div class="row">
<div class="unit italian u4"></div>
<div class="unit german u32"></div>
</div>
<h2>Month 18</h2>
<div class="row">
<div class="unit allied u35"></div>
<div class="unit allied u57"></div>
<div class="unit allied u58"></div>
<div class="unit allied u62"></div>
<div class="unit allied u65"></div>
<div class="unit allied u67"></div>
</div>
<h2>Month 19</h2>
<div class="row">
<div class="unit italian u3"></div>
<div class="unit italian u11"></div>
</div>
<h2>Month 20</h2>
<div class="row">
<div class="unit allied u36"></div>
<div class="unit allied u47"></div>
<div class="unit allied u48"></div>
<div class="unit allied u68"></div>
</div>
|
