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
|
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=700">
<title>Julius Caesar - Blocks</title>
<style>
body {
margin: 40px;
background-color: slategray;
color: white;
text-align: center;
}
div.list {
display: grid;
width: calc(66px * 7 + 8px * 6);
margin: 0 auto;
grid-template-columns: repeat(7, 66px);
gap: 8px;
}
.block {
width: 60px;
height: 60px;
border-width: 3px;
border-radius: 8px;
border: 3px solid blue;
box-shadow: 0 0 2px 1px #0004;
}
.block { background-size: 360px 360px; }
.Cleopatra.block { background-size: 60px 60px; }
.Caesar.block { background-image: url(../blocks_caesar.1x.webp); }
.Cleopatra.block { background-image: url(../blocks_cleopatra.1x.webp); }
.Pompeius.block { background-image: url(../blocks_pompeius.1x.webp); }
@media (min-resolution: 97dpi) {
.Caesar.block { background-image: url(../blocks_caesar.2x.webp); }
.Cleopatra.block { background-image: url(../blocks_cleopatra.2x.webp); }
.Pompeius.block { background-image: url(../blocks_pompeius.2x.webp); }
}
.block.Caesar { background-color: hsl(358, 69%, 47%); }
.block.Caesar { border-color: hsl(358, 69%, 32%); }
.block.Pompeius { background-color: hsl(43, 87%, 44%); }
.block.Pompeius { border-color: hsl(43, 87%, 30%); }
.block.Cleopatra { background-color: hsl(187, 100%, 35%); }
.block.Cleopatra { border-color: hsl(187, 100%, 23%); }
.block_1_1{background-position:0px 0px}
.block_1_2{background-position:-60px 0px}
.block_1_3{background-position:-120px 0px}
.block_1_4{background-position:-180px 0px}
.block_1_5{background-position:-240px 0px}
.block_1_6{background-position:-300px 0px}
.block_2_1{background-position:0px -60px}
.block_2_2{background-position:-60px -60px}
.block_2_3{background-position:-120px -60px}
.block_2_4{background-position:-180px -60px}
.block_2_5{background-position:-240px -60px}
.block_2_6{background-position:-300px -60px}
.block_3_1{background-position:0px -120px}
.block_3_2{background-position:-60px -120px}
.block_3_3{background-position:-120px -120px}
.block_3_4{background-position:-180px -120px}
.block_3_5{background-position:-240px -120px}
.block_3_6{background-position:-300px -120px}
.block_4_1{background-position:0px -180px}
.block_4_2{background-position:-60px -180px}
.block_4_3{background-position:-120px -180px}
.block_4_4{background-position:-180px -180px}
.block_4_5{background-position:-240px -180px}
.block_4_6{background-position:-300px -180px}
.block_5_1{background-position:0px -240px}
.block_5_2{background-position:-60px -240px}
.block_5_3{background-position:-120px -240px}
.block_5_4{background-position:-180px -240px}
.block_5_5{background-position:-240px -240px}
.block_5_6{background-position:-300px -240px}
.block_6_1{background-position:0px -300px}
.block_6_2{background-position:-60px -300px}
.block_6_3{background-position:-120px -300px}
.block_6_4{background-position:-180px -300px}
.block_6_5{background-position:-240px -300px}
.block_6_6{background-position:-300px -300px}
</style>
<body>
<div class="list">
<div class="block Caesar block_1_1"></div>
<div class="block Caesar block_1_2"></div>
<div class="block Caesar block_1_3"></div>
<div class="block Caesar block_1_4"></div>
<div class="block Caesar block_1_5"></div>
<div class="block Caesar block_1_6"></div>
<div class="block Caesar block_2_1"></div>
<div class="block Caesar block_2_2"></div>
<div class="block Caesar block_2_3"></div>
<div class="block Caesar block_2_4"></div>
<div class="block Caesar block_2_5"></div>
<div class="block Caesar block_2_6"></div>
<div class="block Caesar block_3_1"></div>
<div class="block Caesar block_3_2"></div>
<div class="block Caesar block_3_3"></div>
<div class="block Caesar block_3_4"></div>
<div class="block Caesar block_3_5"></div>
<div class="block Caesar block_3_6"></div>
<div class="block Caesar block_4_1"></div>
<div class="block Caesar block_4_2"></div>
<div class="block Caesar block_4_3"></div>
<div class="block Caesar block_4_4"></div>
<div class="block Caesar block_4_5"></div>
<div class="block Caesar block_4_6"></div>
<div class="block Caesar block_5_1"></div>
<div class="block Caesar block_5_2"></div>
<div class="block Caesar block_5_3"></div>
<div class="block Caesar block_5_4"></div>
<div class="block Caesar block_5_5"></div>
<div class="block Caesar block_5_6"></div>
<div class="block Caesar block_6_1"></div>
<div class="block Cleopatra block_1_1"></div>
<div class="block Pompeius block_1_1"></div>
<div class="block Pompeius block_1_2"></div>
<div class="block Pompeius block_1_3"></div>
<div class="block Pompeius block_1_4"></div>
<div class="block Pompeius block_1_5"></div>
<div class="block Pompeius block_1_6"></div>
<div class="block Pompeius block_2_1"></div>
<div class="block Pompeius block_2_2"></div>
<div class="block Pompeius block_2_3"></div>
<div class="block Pompeius block_2_4"></div>
<div class="block Pompeius block_2_5"></div>
<div class="block Pompeius block_2_6"></div>
<div class="block Pompeius block_3_1"></div>
<div class="block Pompeius block_3_2"></div>
<div class="block Pompeius block_3_3"></div>
<div class="block Pompeius block_3_4"></div>
<div class="block Pompeius block_3_5"></div>
<div class="block Pompeius block_3_6"></div>
<div class="block Pompeius block_4_1"></div>
<div class="block Pompeius block_4_2"></div>
<div class="block Pompeius block_4_3"></div>
<div class="block Pompeius block_4_4"></div>
<div class="block Pompeius block_4_5"></div>
<div class="block Pompeius block_4_6"></div>
<div class="block Pompeius block_5_1"></div>
<div class="block Pompeius block_5_2"></div>
<div class="block Pompeius block_5_3"></div>
<div class="block Pompeius block_5_4"></div>
<div class="block Pompeius block_5_5"></div>
<div class="block Pompeius block_5_6"></div>
<div class="block Pompeius block_6_1"></div>
|
