Skip to content

Commit c2debbc

Browse files
solygambassolygambas
committed
add breakout game styling
1 parent 4dddc20 commit c2debbc

File tree

5 files changed

+131
-14
lines changed

5 files changed

+131
-14
lines changed

Diff for: ‎75-breakout game/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Breakout!</title>
8+
</head>
9+
<body>
10+
<h1>Breakout!</h1>
11+
<button id="rules-btn" class="btn rules-btn">Show Rules</button>
12+
<div id="rules" class="rules">
13+
<h2>How To Play:</h2>
14+
<p>
15+
Use your right and left keys to move the paddle to bounce the ball up
16+
and break the blocks.
17+
</p>
18+
<p>If you miss the ball, your score and the blocks will reset.</p>
19+
<button id="close-btn" class="btn">Close</button>
20+
</div>
21+
<canvas id="canvas" width="800" height="600"></canvas>
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

Diff for: ‎75-breakout game/script.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const rulesButton = document.getElementById("rules-btn");
2+
const closeButton = document.getElementById("close-btn");
3+
const rules = document.getElementById("rules");
4+
const canvas = document.getElementById("canvas");
5+
const ctx = canvas.getContext("2d");
6+
7+
// Event Listeners
8+
rulesButton.addEventListener("click", () => rules.classList.add("show"));
9+
closeButton.addEventListener("click", () => rules.classList.remove("show"));

Diff for: ‎75-breakout game/style.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap");
2+
3+
:root {
4+
--background-color: #0095dd;
5+
--canvas-color: #f0f0f0;
6+
--text-color: rgba(255, 255, 255, 0.87);
7+
--hover-color: #222;
8+
--sidebar-color: #333;
9+
--button-color: #000;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background-color: var(--background-color);
18+
font-family: "Balsamiq Sans", cursive;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
min-height: 100vh;
24+
margin: 0;
25+
}
26+
27+
h1 {
28+
font-size: 2.75rem;
29+
color: var(--text-color);
30+
}
31+
32+
canvas {
33+
background-color: var(--canvas-color);
34+
display: block;
35+
border-radius: 5px;
36+
}
37+
38+
.btn {
39+
cursor: pointer;
40+
border: 0;
41+
padding: 0.625rem 1.25rem;
42+
background-color: var(--button-color);
43+
color: var(--text-color);
44+
border-radius: 5px;
45+
}
46+
47+
.btn:focus {
48+
outline: 0;
49+
}
50+
51+
.btn:hover {
52+
background-color: var(--hover-color);
53+
}
54+
55+
.btn:active {
56+
transform: scale(0.98);
57+
}
58+
59+
.rules-btn {
60+
position: absolute;
61+
top: 1.875rem;
62+
left: 1.875rem;
63+
}
64+
65+
.rules {
66+
position: absolute;
67+
top: 0;
68+
left: 0;
69+
background-color: var(--sidebar-color);
70+
color: var(--text-color);
71+
min-height: 100vh;
72+
width: 400px;
73+
padding: 1.25rem;
74+
line-height: 1.5;
75+
transform: translateX(-400px);
76+
transition: transform 1s ease-in-out;
77+
}
78+
79+
.rules.show {
80+
transform: translateX(0);
81+
}

Diff for: ‎77-sortable list/style.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Blinker:wght@400;700&display=swap");
22

33
:root {
44
--border-color: #e3e5e4;
@@ -15,7 +15,7 @@
1515
}
1616

1717
body {
18-
font-family: "Roboto", sans-serif;
18+
font-family: "Blinker", sans-serif;
1919
background-color: var(--background-color);
2020
display: flex;
2121
flex-direction: column;
@@ -26,10 +26,10 @@ body {
2626
}
2727

2828
.draggable-list {
29-
border: 1px solid var(--border-color);
30-
color: var(--text-color);
31-
padding: 0;
32-
list-style-type: none;
29+
border: 1px solid var(--border-color);
30+
color: var(--text-color);
31+
padding: 0;
32+
list-style-type: none;
3333
}
3434

3535
.draggable-list li {
@@ -97,4 +97,4 @@ body {
9797

9898
.check-btn:focus {
9999
outline: none;
100-
}
100+
}

Diff for: ‎78-speak number guessing game/style.css

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap");
22

33
* {
44
box-sizing: border-box;
55
}
66

77
body {
8-
background: #27273d url('https://images.unsplash.com/photo-1534595461757-4974c5072dff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
9-
color: rgba(255,255,255,0.87);
10-
font-family: "Roboto", sans-serif;
8+
background: #27273d
9+
url("https://images.unsplash.com/photo-1534595461757-4974c5072dff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
10+
no-repeat center center/cover;
11+
color: rgba(255, 255, 255, 0.87);
12+
font-family: "Recursive", sans-serif;
1113
display: flex;
1214
flex-direction: column;
1315
align-items: center;
@@ -19,8 +21,8 @@ body {
1921
}
2022

2123
body::after {
22-
content: '';
23-
background-color: rgba(0,0,0,0.7);
24+
content: "";
25+
background-color: rgba(0, 0, 0, 0.7);
2426
position: absolute;
2527
top: 0;
2628
left: 0;
@@ -37,7 +39,8 @@ img {
3739
height: 16rem;
3840
}
3941

40-
h1, h2 {
42+
h1,
43+
h2 {
4144
margin-bottom: 0;
4245
}
4346

0 commit comments

Comments
 (0)