Skip to content

Commit 995ce65

Browse files
UltiRequiemUltiRequiem
committed
💄 Update CSS
1 parent 00658ed commit 995ce65

File tree

3 files changed

+34
-27
lines changed

3 files changed

+34
-27
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<p>
44
<a href="https://gitmoji.dev"><img src="https://img.shields.io/badge/gitmoji-%20😜-FFDD67.svg">
55
<a href="https://github.com/UltiRequiem/SimonDice.js/blob/main/LICENSE"><img alt="License: MIT" src="https://black.readthedocs.io/en/stable/_static/license.svg"></a>
6-
<a href="https://github.com/UltiRequiem/SimonDice.js"><img alt="Code style: black" src="https://img.shields.io/tokei/lines/github.com/UltiRequiem/SimonDice.js-2018?color=blue&label=Total%20Lines"></a>
6+
![https://github.com/UltiRequiem/SimonDice.js](https://tokei.rs/b1/github/UltiRequiem/SimonDice.js?category=lines)
77
</p>
88

99
![Screenshot](./img/screenshot.png)

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<link rel="shortcut icon" href="./img/icon.png" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56
<meta charset="utf-8" />
67
<title>Simon Dice</title>
78
<link rel="stylesheet" href="./styles.css" />
@@ -17,5 +18,6 @@
1718
</button>
1819
</div>
1920
<script src="./script.js"></script>
21+
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
2022
</body>
2123
</html>

‎styles.css

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
body {
22
margin: 0;
3-
background: #dedede;
3+
background: #e9e9e9;
44
display: flex;
55
align-items: center;
66
height: 100vh;
7+
font-family: system-ui;
78
}
89

910
.gameboard {
@@ -14,6 +15,7 @@ body {
1415
margin: 0 auto;
1516
max-height: 60vh;
1617
max-width: 60vh;
18+
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
1719
}
1820

1921
.color {
@@ -31,50 +33,47 @@ body {
3133
}
3234

3335
.celeste {
34-
background: #22a6b3;
36+
background: #22377c;
37+
transition: 0.2s;
3538
}
3639

3740
.celeste.light {
38-
background: #7ed6df;
41+
background: #123ece;
42+
transform: scale(1.03);
43+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
3944
}
4045

4146
.violeta {
42-
background: #be2edd;
47+
background: #7b1592;
48+
transition: 0.2s;
4349
}
4450

4551
.violeta.light {
46-
background: #e056fd;
52+
background: #bf0ce7;
53+
transform: scale(1.03);
54+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
4755
}
4856

4957
.naranja {
50-
background: #f0932b;
58+
background: #a32727;
59+
transition: 0.2s;
5160
}
5261

5362
.naranja.light {
54-
background: #ffbe76;
63+
background: #e61111;
64+
transform: scale(1.03);
65+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
5566
}
5667

5768
.verde {
58-
background: #6ab04c;
69+
background: #1c864c;
70+
transition: 0.2s;
5971
}
6072

6173
.verde.light {
62-
background: #badc58;
63-
}
64-
65-
.btn-start {
66-
width: 400px;
67-
height: 100px;
68-
background: #ecf0f1;
69-
color: #2c3e50;
70-
font-size: 2.5rem;
71-
position: absolute;
72-
top: calc(50% - 50px);
73-
left: calc(50% - 200px);
74-
}
75-
76-
.hide {
77-
display: none;
74+
background: #10e46f;
75+
transform: scale(1.03);
76+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
7877
}
7978

8079
.btn-start {
@@ -84,9 +83,10 @@ body {
8483
background: #ecf0f1;
8584
color: #2c3e50;
8685
border: none;
87-
border-bottom: 4px solid #c4c6c7;
86+
border: 2px solid #2c3e50;
8887
border-radius: 8px;
89-
font-size: 3em;
88+
font-size: 2em;
89+
letter-spacing: 1.5px;
9090
position: absolute;
9191
top: calc(50% - 50px);
9292
left: calc(50% - 210px);
@@ -98,8 +98,13 @@ body {
9898
color: #ecf0f1;
9999
background: #2c3e50;
100100
border-bottom: 4px solid #1f3346;
101+
letter-spacing: -1px;
101102
}
102103

103104
.btn-start:active {
104105
transform: scale(0.95);
105106
}
107+
108+
.hide {
109+
display: none;
110+
}

0 commit comments

Comments
 (0)