Skip to content

Commit 514a4b3

Browse files
curiousbudcuriousbud
authored
Merge pull request #3 from ak-khandelwal/feat/critter-clash-redesign
Feat: Redesign app with 'Critter Clash' theme
2 parents 113d61a + c4963f8 commit 514a4b3

File tree

3 files changed

+269
-179
lines changed

3 files changed

+269
-179
lines changed

‎assets/css/style.css‎

Lines changed: 165 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,230 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Boogaloo&display=swap");
23

34
* {
45
margin: 0;
56
padding: 0;
7+
box-sizing: border-box; /* Added for easier sizing */
68
}
79

810
body {
9-
background-color: #0a0908;
10-
font-family: "Orbitron", sans-serif;
11+
background-color: #ADD8E6; /* Light Sky Blue */
12+
font-family: "Boogaloo", cursive; /* Playful fallback font */
13+
color: #333; /* Darker text for readability */
1114
}
1215

1316
.container {
14-
height: 70vh;
17+
min-height: 100vh; /* Ensure full viewport height */
1518
display: flex;
1619
align-items: center;
1720
justify-content: space-around;
18-
flex-direction: row-reverse;
21+
flex-direction: column; /* Stack elements vertically for better responsiveness */
22+
padding: 20px;
1923
}
2024

2125
.board {
2226
display: flex;
23-
flex-direction: column-reverse;
27+
flex-direction: column;
2428
align-items: center;
2529
justify-content: center;
30+
margin-top: 20px; /* Add some space above the board */
2631
}
2732

2833
h1 {
29-
font-family: "Orbitron", sans-serif;
34+
font-family: "Luckiest Guy", cursive;
3035
width: 100%;
31-
color: #0a0908;
32-
background-color: #50c9ce;
36+
color: #FFFFFF; /* White text */
37+
background-color: #FFA500; /* Playful Orange */
3338
text-align: center;
39+
padding: 15px 0;
40+
font-size: 3rem; /* Larger heading */
41+
border-radius: 15px;
42+
margin-bottom: 20px;
43+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
3444
}
3545

3646
.game {
3747
width: 60vmin;
48+
max-width: 400px; /* Max width for larger screens */
3849
height: 60vmin;
39-
margin-right: 35rem;
40-
display: flex;
41-
flex-wrap: wrap;
42-
align-items: center;
43-
justify-content: space-evenly;
50+
max-height: 400px; /* Max height for larger screens */
51+
display: grid; /* Use grid for easier box alignment */
52+
grid-template-columns: repeat(3, 1fr);
53+
grid-template-rows: repeat(3, 1fr);
54+
gap: 10px; /* Space between boxes */
55+
margin-bottom: 30px; /* Space below the game grid */
4456
}
4557

4658
.box {
47-
height: 18vmin;
48-
width: 18vmin;
49-
background-color: white;
50-
color: black;
51-
border: none;
52-
border-radius: 50%;
53-
box-shadow: 0 0 1rem rgba(80, 201, 206, 1);
54-
font-family: "Orbitron", sans-serif;
55-
font-size: 4rem;
56-
font-weight: 900;
59+
background-color: #FFD700; /* Warm Yellow */
60+
color: #D9534F; /* Contrasting color for X/O, e.g., a reddish tone */
61+
border: 3px solid #DA70D6; /* Fun Purple border */
62+
border-radius: 15px; /* Softer corners */
63+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
64+
font-family: "Luckiest Guy", cursive;
65+
font-size: 5vmin; /* Responsive font size */
66+
display: flex; /* Center content easily */
67+
align-items: center;
68+
justify-content: center;
69+
cursor: pointer;
70+
transition: background-color 0.3s ease;
71+
}
72+
73+
.box:hover {
74+
background-color: #FFC107; /* Slightly darker yellow on hover */
75+
}
76+
77+
.box:disabled {
78+
cursor: not-allowed;
79+
opacity: 0.7;
5780
}
5881

5982
.gameWinner {
6083
display: flex;
6184
align-items: center;
6285
justify-content: center;
6386
flex-direction: column;
87+
padding: 20px;
88+
background-color: rgba(255, 255, 255, 0.9);
89+
border-radius: 20px;
90+
box-shadow: 0 0 15px rgba(0,0,0,0.2);
6491
}
6592

6693
.newGame_ContinueBtn {
6794
display: flex;
6895
align-items: center;
69-
justify-content: space-between;
96+
justify-content: center; /* Center buttons */
97+
flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
98+
gap: 15px; /* Space between buttons */
7099
}
71100

72-
#newGameBtn {
73-
height: 14rem;
74-
background-color: #50c9ce;
75-
border: none;
76-
margin: 1rem;
77-
box-shadow: 0 0 1rem rgba(80, 201, 206, 1);
78-
font-family: "Orbitron", sans-serif;
79-
font-weight: 600;
80-
font-size: 2rem;
81-
padding: 1rem;
82-
border-radius: 50%;
83-
}
84-
85-
#continueBtn {
86-
height: 14rem;
87-
width: 14rem;
88-
background-color: #50c9ce;
101+
#newGameBtn,
102+
#continueBtn,
103+
#reset {
104+
background-color: #40E0D0; /* Friendly Teal */
105+
color: #FFFFFF;
89106
border: none;
90-
margin: 1rem;
91-
box-shadow: 0 0 1rem rgba(80, 201, 206, 1);
92-
font-family: "Orbitron", sans-serif;
93-
font-weight: 600;
94-
font-size: 2rem;
95-
padding: 1rem;
96-
border-radius: 50%;
107+
margin: 0.5rem; /* Adjusted margin */
108+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
109+
font-family: "Luckiest Guy", cursive;
110+
font-weight: normal; /* Luckiest Guy is already bold */
111+
font-size: 1.5rem; /* Slightly smaller for better fit */
112+
padding: 15px 25px; /* More padding */
113+
border-radius: 25px; /* More rounded */
114+
cursor: pointer;
115+
transition: transform 0.2s ease, background-color 0.2s ease;
97116
}
98117

118+
#newGameBtn:hover,
119+
#continueBtn:hover,
120+
#reset:hover {
121+
transform: scale(1.05);
122+
background-color: #35C4B5; /* Darker teal on hover */
123+
}
124+
125+
99126
#msg {
100-
color: white;
101-
font-size: 4rem;
127+
color: #333; /* Darker text for readability */
128+
font-size: 2.5rem; /* Adjusted size */
102129
text-align: center;
130+
margin-bottom: 20px; /* Add space below message */
131+
font-family: "Boogaloo", cursive;
103132
}
104133

105134
.hide {
106-
display: none;
107-
}
108-
#reset {
109-
height: 8.5rem;
110-
background-color: #50c9ce;
111-
border: none;
112-
margin-top: 1rem;
113-
box-shadow: 0 0 1rem rgba(80, 201, 206, 1);
114-
font-family: "Orbitron", sans-serif;
115-
font-weight: 600;
116-
font-size: 2rem;
117-
padding: 1rem;
118-
border-radius: 50%;
135+
display: none !important; /* Ensure hide class works effectively */
119136
}
120137

121-
/* Add styles for the scoreboard */
138+
/* Scoreboard Styles */
122139
.scoreboard {
123140
text-align: center;
124-
color: white;
125-
border: 2px solid #50c9ce;
126-
border-radius: 2rem;
127-
padding: 0.5rem;
141+
color: #333; /* Dark text for readability */
142+
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
143+
border: 3px solid #FFA500; /* Playful Orange border */
144+
border-radius: 15px;
145+
padding: 15px;
146+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
147+
width: 80%;
148+
max-width: 500px; /* Max width for scoreboard */
149+
margin-top: 0; /* Remove negative margin from JS if any */
128150
}
129151

130152
.scoreboard div {
131-
margin: 0.5rem 0;
153+
margin: 10px 0;
132154
}
133155

134156
.scoreboard p {
135-
font-size: 1.5rem;
136-
margin: 0.2rem 0;
157+
font-size: 1.2rem; /* Slightly smaller for better fit */
158+
margin: 5px 0;
159+
font-family: "Boogaloo", cursive;
160+
}
161+
162+
/* Ensure game elements are not hidden by default if they were before */
163+
.game, #reset {
164+
display: flex; /* or grid, as appropriate */
165+
}
166+
.game {
167+
display: grid;
168+
}
169+
#reset {
170+
display: inline-block; /* or block */
171+
}
172+
173+
/* Responsive adjustments */
174+
@media (max-width: 768px) {
175+
.container {
176+
flex-direction: column;
177+
justify-content: flex-start; /* Align items to the top */
178+
}
179+
.game {
180+
width: 80vmin;
181+
height: 80vmin;
182+
margin-right: 0; /* Remove margin for smaller screens */
183+
}
184+
h1 {
185+
font-size: 2.5rem;
186+
}
187+
#msg {
188+
font-size: 2rem;
189+
}
190+
#newGameBtn,
191+
#continueBtn,
192+
#reset {
193+
font-size: 1.2rem;
194+
padding: 12px 20px;
195+
}
196+
.scoreboard {
197+
width: 90%;
198+
}
199+
}
200+
201+
@media (max-width: 480px) {
202+
.game {
203+
width: 90vmin;
204+
height: 90vmin;
205+
gap: 5px;
206+
}
207+
.box {
208+
font-size: 8vmin;
209+
}
210+
h1 {
211+
font-size: 2rem;
212+
}
213+
#msg {
214+
font-size: 1.8rem;
215+
}
216+
#newGameBtn,
217+
#continueBtn,
218+
#reset {
219+
font-size: 1rem;
220+
padding: 10px 15px;
221+
width: 100%; /* Make buttons full width */
222+
margin-bottom: 10px; /* Add space between stacked buttons */
223+
}
224+
.newGame_ContinueBtn {
225+
flex-direction: column; /* Stack these buttons */
226+
}
227+
.scoreboard p {
228+
font-size: 1rem;
229+
}
137230
}

0 commit comments

Comments
 (0)