blob: 8e74e3a01e7d97ab968cb7b63774a24f0a383ec7 (
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
|
body {
font-family: sans-serif;
--piece-size: 70px;
--image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/Croatia_Opatija_Maiden_with_the_Seagull_BW_2014-10-10_10-35-13.jpg");
--view-width: 800px;
--view-height: 480px;
margin: 0;
position: relative;
}
#play-area {
width: 90vw;
height: 90vh;
padding: 5vh 5vw;
position: relative;
user-select: none;
}
.piece {
position: absolute;
width: var(--piece-size);
height: var(--piece-size);
background-image: var(--image);
background-size: var(--view-width) var(--view-height);
/* clip-path: path("M0 0 L40 0 L40 40 L0 40 Z"); */
}
.debug-point {
position: absolute;
width: 1px;
height: 1px;
z-index: 999999;
background-image: none;
}
.debug-relative {
position: relative;
width: 100%;
height: 100%;
}
|