snake-js/style.css at main · mitory/snake-js · 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
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
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:wght,BNCE,SPAC@700,0,12&display=swap');

body {
	background: #212121;
	font-family: "Shantell Sans", cursive;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings:
		"BNCE" 100,
		"INFM" 0,
		"SPAC" 12;
	overflow:hidden;
}

.container {
	width: 320px;
	margin: 0 auto;
	padding: 50px 0;
}

.header {
	width: 200px;
	margin: 0 auto;
}


.score-bar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.best-score {
	background: #FFE740;
	font-size: 20px;
}

.current-score {
	background: #67E667;
	font-size: 24px;
}

.score {
	text-align: center;
	color: white;
	padding: 15px;
	border-radius: 10px;
}

.game-wrapper {
	width: 304px;
	height: 304px;
	margin: 30px auto;
	border-radius: 10px;
	background: #67E667;
	background-image: url('./cell.webp');
	background-size: 16px 16px;
	box-shadow: 0 0 3px 3px white;
}

#game {
	height: 304px;
	width: 304px;
	display: block;
}


.button-wrapper {
	width: 300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 0px;
}

.btn1 {
	grid-area: 1 / 3 / 2 / 4;
	background-image: url('./arrow/up.svg');
}
.btn2 {
	grid-area: 2 / 2 / 3 / 3;
	background-image: url('./arrow/left.svg');
}
.btn3 {
	grid-area: 2 / 4 / 3 / 5;
	background-image: url('./arrow/right.svg');
}
.btn4 {
	grid-area: 3 / 3 / 4 / 4;
	background-image: url('./arrow/down.svg');
}

.button {
	background-color: #67E667;
	box-shadow: 0 0 3px 3px white;
	border-radius: 10px;
	width: 55px;
	height: 55px;
	background-size: 55px;
}

.d-none {
	display: none;
}

@media(max-width: 500px) {
	.container {
		padding: 15px 0;
	}
	.score {
		padding: 5px;
	}
}