Hugging Face's logo

Spaces:
JingyeChen22
/
2048
Running

App Files Community
JingyeChen22 commited on
Commit
0a1f542
·
verified ·
1 Parent(s): d729ae0

Create style.css

Browse files
Files changed (1) hide show
  1. style.css +78 -17
style.css CHANGED
@@ -1,28 +1,89 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: Arial, sans-serif;
9
+ background-color: #faf8ef;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ min-height: 100vh;
14
+ }
15
+
16
+ .container {
17
+ text-align: center;
18
  }
19
 
20
  h1 {
21
+ font-size: 48px;
22
+ color: #776e65;
23
+ margin-bottom: 20px;
24
  }
25
 
26
+ .score-container {
27
+ display: flex;
28
+ justify-content: space-between;
29
+ align-items: center;
30
+ margin-bottom: 20px;
31
  }
32
 
33
+ .score-box {
34
+ background-color: #bbada0;
35
+ padding: 10px 20px;
36
+ border-radius: 5px;
37
+ color: white;
 
38
  }
39
 
40
+ #new-game {
41
+ background-color: #8f7a66;
42
+ color: white;
43
+ border: none;
44
+ padding: 10px 20px;
45
+ border-radius: 5px;
46
+ cursor: pointer;
47
+ font-size: 16px;
48
  }
49
+
50
+ .grid-container {
51
+ background-color: #bbada0;
52
+ padding: 10px;
53
+ border-radius: 5px;
54
+ display: inline-block;
55
+ }
56
+
57
+ .grid-row {
58
+ display: flex;
59
+ }
60
+
61
+ .grid-cell {
62
+ width: 100px;
63
+ height: 100px;
64
+ background-color: #cdc1b4;
65
+ margin: 5px;
66
+ border-radius: 5px;
67
+ display: flex;
68
+ justify-content: center;
69
+ align-items: center;
70
+ font-size: 36px;
71
+ font-weight: bold;
72
+ color: #776e65;
73
+ }
74
+
75
+ .tile {
76
+ background-color: #eee4da;
77
+ }
78
+
79
+ .tile-2 { background-color: #eee4da; }
80
+ .tile-4 { background-color: #ede0c8; }
81
+ .tile-8 { background-color: #f2b179; color: white; }
82
+ .tile-16 { background-color: #f59563; color: white; }
83
+ .tile-32 { background-color: #f67c5f; color: white; }
84
+ .tile-64 { background-color: #f65e3b; color: white; }
85
+ .tile-128 { background-color: #edcf72; color: white; }
86
+ .tile-256 { background-color: #edcc61; color: white; }
87
+ .tile-512 { background-color: #edc850; color: white; }
88
+ .tile-1024 { background-color: #edc53f; color: white; }
89
+ .tile-2048 { background-color: #edc22e; color: white; }