Tutorials/ChessGame/style.css at main · SimpleCodingTutorials/Tutorials · GitHub

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
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  }
.chessBoard {
  width:80vw;
  height: 80vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.square {
  width:12.5%;
  height: 12.5%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.white {
  background-color: #f0d9b5;
}
.black {
  background-color: #b58863;
}
.coordinate {
  height:auto;
  display:flex;
  bottom: 4%;
  left:4%;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.rank {
  top:4%;
  right:4%;
  left:auto;
}
.whiteText {
  color:#f0d9b5;
}
.blackText {
  color:#b58863;
}
.piece {
  width:100%;
  z-index: 1;
  cursor: pointer;
}
.piece img {
  max-width: 100%;
  width:100%;
  height: auto;
}


@media (min-width:600px) {
  .chessBoard {
      width:600px;
      height: 600px;
  }
}
@media (max-width:600px) {
  .coordinate {
    font-size: 8px;
  }
}