summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2022-09-27 19:59:55 +0200
committerTor Andersson <tor@ccxvii.net>2022-11-17 13:11:27 +0100
commit026f77c628a8e84c1f889f6e8fc3630361a28fab (patch)
tree97e19354afbaea75815adb4302074c7da0e8e072
parent252169b8b3be292daa143752904aa9e23acc6cf0 (diff)
downloadrommel-in-the-desert-026f77c628a8e84c1f889f6e8fc3630361a28fab.tar.gz
Update unit gallery to list by order of appearance.
Diffstat
-rw-r--r--info/units.html228
1 files changed, 153 insertions, 75 deletions
diff --git a/info/units.html b/info/units.html
index 567fef7..79512a0 100644
--- a/info/units.html
+++ b/info/units.html
@@ -1,15 +1,18 @@
<!DOCTYPE html>
+<title>Rommel in the Desert - Unit Appearance</title>
+<link rel="stylesheet" href="/fonts/fonts.css">
<style>
body {
background-color: slategray;
- margin: 40px;
+ font-family: "Source Sans";
+ margin: 40px auto;
+ max-width: 736px;
}
.row {
- width: 620px;
display: flex;
flex-wrap: wrap;
gap: 10px;
- margin: 10px auto;
+ margin: 16px 24px;
}
.unit {
width: 51px;
@@ -32,6 +35,14 @@ body {
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}
@@ -134,109 +145,176 @@ body {
<div id="units">
+<h2>Start</h2>
<div class="row">
<div class="unit italian u0"></div>
-<div class="unit italian u1"></div>
-<div class="unit italian u2"></div>
-<div class="unit italian u3"></div>
-<div class="unit italian u4"></div>
<div class="unit italian u5"></div>
-<div class="unit italian u6"></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 u11"></div>
-<div class="unit italian u12"></div>
<div class="unit italian u13"></div>
-</div><div class="row">
-<div class="unit german u14"></div>
<div class="unit german u15"></div>
-<div class="unit german u16"></div>
-<div class="unit german u17"></div>
<div class="unit german u18"></div>
-<div class="unit german u19"></div>
<div class="unit german u20"></div>
-<div class="unit german u21"></div>
-<div class="unit german u22"></div>
-<div class="unit german u23"></div>
-<div class="unit german u24"></div>
-<div class="unit german u25"></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><div class="row">
+</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 class="unit german u30"></div>
-<div class="unit german u31"></div>
-<div class="unit german u32"></div>
-<div class="unit german u33"></div>
</div>
+<h2>Month 4</h2>
<div class="row">
<div class="unit allied u34"></div>
-<div class="unit allied u35"></div>
-<div class="unit allied u36"></div>
-<div class="unit allied u37"></div>
-<div class="unit allied u38"></div>
<div class="unit allied u39"></div>
<div class="unit allied u40"></div>
-<div class="unit allied u41"></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 u43"></div>
-<div class="unit allied u44"></div>
<div class="unit allied u45"></div>
-<div class="unit allied u46"></div>
-<div class="unit allied u47"></div>
-<div class="unit allied u48"></div>
-<div class="unit allied u49"></div>
-<div class="unit allied u50"></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 u52"></div>
-<div class="unit allied u53"></div>
<div class="unit allied u54"></div>
-<div class="unit allied u55"></div>
-<div class="unit allied u56"></div>
-<div class="unit allied u57"></div>
-<div class="unit allied u58"></div>
-<div class="unit allied u59"></div>
-<div class="unit allied u60"></div>
-<div class="unit allied u61"></div>
-<div class="unit allied u62"></div>
-<div class="unit allied u63"></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 class="unit allied u65"></div>
+</div>
+
+<h2>Month 14</h2>
+<div class="row">
<div class="unit allied u66"></div>
-<div class="unit allied u67"></div>
-<div class="unit allied u68"></div>
-<div class="unit allied u69"></div>
-<div class="unit allied u70"></div>
-</div><div class="row">
-<div class="unit allied u71"></div>
-<div class="unit allied u72"></div>
<div class="unit allied u73"></div>
<div class="unit allied u74"></div>
<div class="unit allied u75"></div>
-<div class="unit allied u76"></div>
-<div class="unit allied u77"></div>
-<div class="unit allied u78"></div>
<div class="unit allied u79"></div>
-</div><div class="row">
-<div class="unit allied u80"></div>
-<div class="unit allied u81"></div>
-<div class="unit allied u82"></div>
-<div class="unit allied u83"></div>
-<div class="unit allied u84"></div>
-</div><div class="row">
-<div class="unit allied u85"></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 class="unit allied u88"></div>
-</div><div class="row">
-<div class="unit allied u89"></div>
-<div class="unit allied u90"></div>
-<div class="unit allied u91"></div>
-</div><div class="row">
-<div class="unit allied u92"></div>
-<div class="unit allied u93"></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>
+