Skip to content

Commit 4fb4f36

Browse files
committed
(CI) Run Prettier
1 parent b3de495 commit 4fb4f36

9 files changed

Lines changed: 131 additions & 139 deletions

File tree

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title> Chris's First Art Animation</title>
7-
<link rel="stylesheet" type="text/css" href="styles.css">
8-
</head>
9-
<body>
10-
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Chris's First Art Animation</title>
7+
<link rel="stylesheet" type="text/css" href="styles.css" />
8+
</head>
9+
<body>
1110
<div class="box">
12-
<h1> I am Art </h1>
11+
<h1>I am Art</h1>
1312
</div>
14-
15-
</body>
16-
</html>
13+
</body>
14+
</html>
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"githubHandle": "ChrisAhearn",
3-
"artName": "pureart"
4-
}
2+
"githubHandle": "ChrisAhearn",
3+
"artName": "pureart"
4+
}
Lines changed: 44 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,56 @@
11
body {
2-
background: rgb(182, 237, 237);
2+
background: rgb(182, 237, 237);
33

4-
display: flex;
5-
justify-content: center;
6-
align-items: center;
7-
min-height: 100vh;
8-
}
9-
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
}
109

1110
.box {
12-
background-color: rgb(255, 0, 221);
13-
width: 300px;
14-
height: 300px;
15-
border: 15px solid rgb(245, 166, 223);
16-
padding: 50px;
17-
margin: 20px;
18-
19-
display: flex;
20-
justify-content: center;
21-
align-items: center;
22-
11+
background-color: rgb(255, 0, 221);
12+
width: 300px;
13+
height: 300px;
14+
border: 15px solid rgb(245, 166, 223);
15+
padding: 50px;
16+
margin: 20px;
2317

24-
animation:
25-
colorChange 4s infinite,
26-
fadeInOut 4s infinite;
27-
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
2821

22+
animation: colorChange 4s infinite, fadeInOut 4s infinite;
2923
}
3024

3125
@keyframes colorChange {
32-
0% {
33-
background-color: aqua;
34-
}
35-
25% {
36-
background-color: rgb(255, 0, 119);
37-
}
38-
50% {
39-
background-color: aqua;
40-
}
41-
75% {
42-
background-color: rgb(255, 0, 187);
43-
}
44-
100% {
45-
background-color: aqua;
46-
}
26+
0% {
27+
background-color: aqua;
28+
}
29+
25% {
30+
background-color: rgb(255, 0, 119);
31+
}
32+
50% {
33+
background-color: aqua;
34+
}
35+
75% {
36+
background-color: rgb(255, 0, 187);
37+
}
38+
100% {
39+
background-color: aqua;
40+
}
4741
}
4842

4943
@keyframes fadeInOut {
50-
0% {
51-
opacity: 0;
52-
transform: scale(0.5);
53-
}
54-
50% {
55-
opacity: 1;
56-
transform: scale(1);
57-
}
58-
100% {
59-
opacity: 0;
60-
transform: scale(0.5);
61-
}
62-
}
44+
0% {
45+
opacity: 0;
46+
transform: scale(0.5);
47+
}
48+
50% {
49+
opacity: 1;
50+
transform: scale(1);
51+
}
52+
100% {
53+
opacity: 0;
54+
transform: scale(0.5);
55+
}
56+
}

Art/vitohuangdev-spin/index.html

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Spiralling</title>
7-
<link rel="stylesheet" href="./styles.css">
8-
</head>
9-
<body>
10-
<div class="spin-container">
11-
<div class="spin-rotator">
12-
<div class="spin-rotator__particle"></div>
13-
<div class="spin-rotator__particle"></div>
14-
<div class="spin-rotator__particle"></div>
15-
<div class="spin-rotator__particle"></div>
16-
<div class="spin-rotator__particle"></div>
17-
<div class="spin-rotator__particle"></div>
18-
<div class="spin-rotator__particle"></div>
19-
<div class="spin-rotator__particle"></div>
20-
<div class="spin-rotator__particle"></div>
21-
<div class="spin-rotator__particle"></div>
22-
<div class="spin-rotator__particle"></div>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Spiralling</title>
7+
<link rel="stylesheet" href="./styles.css" />
8+
</head>
9+
<body>
10+
<div class="spin-container">
11+
<div class="spin-rotator">
12+
<div class="spin-rotator__particle"></div>
13+
<div class="spin-rotator__particle"></div>
14+
<div class="spin-rotator__particle"></div>
15+
<div class="spin-rotator__particle"></div>
16+
<div class="spin-rotator__particle"></div>
17+
<div class="spin-rotator__particle"></div>
18+
<div class="spin-rotator__particle"></div>
19+
<div class="spin-rotator__particle"></div>
20+
<div class="spin-rotator__particle"></div>
21+
<div class="spin-rotator__particle"></div>
22+
<div class="spin-rotator__particle"></div>
23+
</div>
2324
</div>
24-
</div>
25-
</body>
26-
</html>
25+
</body>
26+
</html>

Art/vitohuangdev-spin/meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"artName": "spin",
33
"githubHandle": "vitohuangdev"
4-
}
4+
}

Art/vitohuangdev-spin/styles.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99

1010
@keyframes spin {
1111
from {
12-
transform: translate(-50%, -50%) rotate(0deg)
12+
transform: translate(-50%, -50%) rotate(0deg);
1313
}
1414
to {
15-
transform: translate(-50%, -50%) rotate(360deg)
15+
transform: translate(-50%, -50%) rotate(360deg);
1616
}
1717
}
1818

@@ -45,41 +45,41 @@
4545
}
4646

4747
.spin-rotator__particle:nth-child(2) {
48-
transform: translate(calc(var(--radius) * 1), calc(var(--radius) * 1))
48+
transform: translate(calc(var(--radius) * 1), calc(var(--radius) * 1));
4949
}
5050

5151
.spin-rotator__particle:nth-child(3) {
52-
transform: translate(calc(var(--radius) * 2), calc(var(--radius) * 2))
52+
transform: translate(calc(var(--radius) * 2), calc(var(--radius) * 2));
5353
}
5454

5555
.spin-rotator__particle:nth-child(4) {
56-
transform: translate(calc(var(--radius) * 3), calc(var(--radius) * 3))
56+
transform: translate(calc(var(--radius) * 3), calc(var(--radius) * 3));
5757
}
5858

5959
.spin-rotator__particle:nth-child(5) {
60-
transform: translate(calc(var(--radius) * 4), calc(var(--radius) * 4))
60+
transform: translate(calc(var(--radius) * 4), calc(var(--radius) * 4));
6161
}
6262

6363
.spin-rotator__particle:nth-child(6) {
64-
transform: translate(calc(var(--radius) * 5), calc(var(--radius) * 5))
64+
transform: translate(calc(var(--radius) * 5), calc(var(--radius) * 5));
6565
}
6666

6767
.spin-rotator__particle:nth-child(7) {
68-
transform: translate(calc(var(--radius) * -1), calc(var(--radius) * -1))
68+
transform: translate(calc(var(--radius) * -1), calc(var(--radius) * -1));
6969
}
7070

7171
.spin-rotator__particle:nth-child(8) {
72-
transform: translate(calc(var(--radius) * -2), calc(var(--radius) * -2))
72+
transform: translate(calc(var(--radius) * -2), calc(var(--radius) * -2));
7373
}
7474

7575
.spin-rotator__particle:nth-child(9) {
76-
transform: translate(calc(var(--radius) * -3), calc(var(--radius) * -3))
76+
transform: translate(calc(var(--radius) * -3), calc(var(--radius) * -3));
7777
}
7878

7979
.spin-rotator__particle:nth-child(10) {
80-
transform: translate(calc(var(--radius) * -4), calc(var(--radius) * -4))
80+
transform: translate(calc(var(--radius) * -4), calc(var(--radius) * -4));
8181
}
8282

8383
.spin-rotator__particle:last-child {
84-
transform: translate(calc(var(--radius) * -5), calc(var(--radius) * -5))
85-
}
84+
transform: translate(calc(var(--radius) * -5), calc(var(--radius) * -5));
85+
}
Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Spiralling</title>
7-
<link rel="stylesheet" href="./style.css">
8-
</head>
9-
<body>
10-
<div class="spiral-container">
11-
<div class="spiral-rotator">
12-
<div class="spiral-rotator__particle"></div>
13-
<div class="spiral-rotator__particle"></div>
14-
<div class="spiral-rotator__particle"></div>
15-
<div class="spiral-rotator__particle"></div>
16-
<div class="spiral-rotator__particle"></div>
17-
<div class="spiral-rotator__particle"></div>
18-
<div class="spiral-rotator__particle"></div>
19-
<div class="spiral-rotator__particle"></div>
20-
<div class="spiral-rotator__particle"></div>
21-
<div class="spiral-rotator__particle"></div>
22-
<div class="spiral-rotator__particle"></div>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Spiralling</title>
7+
<link rel="stylesheet" href="./style.css" />
8+
</head>
9+
<body>
10+
<div class="spiral-container">
11+
<div class="spiral-rotator">
12+
<div class="spiral-rotator__particle"></div>
13+
<div class="spiral-rotator__particle"></div>
14+
<div class="spiral-rotator__particle"></div>
15+
<div class="spiral-rotator__particle"></div>
16+
<div class="spiral-rotator__particle"></div>
17+
<div class="spiral-rotator__particle"></div>
18+
<div class="spiral-rotator__particle"></div>
19+
<div class="spiral-rotator__particle"></div>
20+
<div class="spiral-rotator__particle"></div>
21+
<div class="spiral-rotator__particle"></div>
22+
<div class="spiral-rotator__particle"></div>
23+
</div>
2324
</div>
24-
</div>
25-
</body>
26-
</html>
25+
</body>
26+
</html>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"artName": "spiralling",
33
"githubHandle": "vitohuangdev"
4-
}
4+
}

Art/vitohuangdev-spiralling/style.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99

1010
@keyframes spiralling {
1111
from {
12-
transform: translate(-50%, -50%) rotate(0deg)
12+
transform: translate(-50%, -50%) rotate(0deg);
1313
}
1414
to {
15-
transform: translate(-50%, -50%) rotate(360deg)
15+
transform: translate(-50%, -50%) rotate(360deg);
1616
}
1717
}
1818

@@ -45,41 +45,41 @@
4545
}
4646

4747
.spiral-rotator__particle:nth-child(2) {
48-
transform: translate(calc(var(--radius) * 1), calc(var(--radius) * 1))
48+
transform: translate(calc(var(--radius) * 1), calc(var(--radius) * 1));
4949
}
5050

5151
.spiral-rotator__particle:nth-child(3) {
52-
transform: translate(calc(var(--radius) * 2), calc(var(--radius) * 2))
52+
transform: translate(calc(var(--radius) * 2), calc(var(--radius) * 2));
5353
}
5454

5555
.spiral-rotator__particle:nth-child(4) {
56-
transform: translate(calc(var(--radius) * 3), calc(var(--radius) * 3))
56+
transform: translate(calc(var(--radius) * 3), calc(var(--radius) * 3));
5757
}
5858

5959
.spiral-rotator__particle:nth-child(5) {
60-
transform: translate(calc(var(--radius) * 4), calc(var(--radius) * 4))
60+
transform: translate(calc(var(--radius) * 4), calc(var(--radius) * 4));
6161
}
6262

6363
.spiral-rotator__particle:nth-child(6) {
64-
transform: translate(calc(var(--radius) * 5), calc(var(--radius) * 5))
64+
transform: translate(calc(var(--radius) * 5), calc(var(--radius) * 5));
6565
}
6666

6767
.spiral-rotator__particle:nth-child(7) {
68-
transform: translate(calc(var(--radius) * -1), calc(var(--radius) * -1))
68+
transform: translate(calc(var(--radius) * -1), calc(var(--radius) * -1));
6969
}
7070

7171
.spiral-rotator__particle:nth-child(8) {
72-
transform: translate(calc(var(--radius) * -2), calc(var(--radius) * -2))
72+
transform: translate(calc(var(--radius) * -2), calc(var(--radius) * -2));
7373
}
7474

7575
.spiral-rotator__particle:nth-child(9) {
76-
transform: translate(calc(var(--radius) * -3), calc(var(--radius) * -3))
76+
transform: translate(calc(var(--radius) * -3), calc(var(--radius) * -3));
7777
}
7878

7979
.spiral-rotator__particle:nth-child(10) {
80-
transform: translate(calc(var(--radius) * -4), calc(var(--radius) * -4))
80+
transform: translate(calc(var(--radius) * -4), calc(var(--radius) * -4));
8181
}
8282

8383
.spiral-rotator__particle:last-child {
84-
transform: translate(calc(var(--radius) * -5), calc(var(--radius) * -5))
85-
}
84+
transform: translate(calc(var(--radius) * -5), calc(var(--radius) * -5));
85+
}

0 commit comments

Comments
 (0)