Skip to content

Commit 2474d71

Browse files
Guma15Guma15
committed
updated css
1 parent d556047 commit 2474d71

2 files changed

Lines changed: 28 additions & 29 deletions

File tree

‎projects/number-guessing-game/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Number Guessing Game</title>
7+
<link rel="stylesheet" href="../../assets/styles.css">
78
<link rel="stylesheet" href="styles.css">
89
</head>
910
<body>
1011
<h1>Number Guessing Game</h1>
11-
<div id="game-container">
12+
<div id="game-container" class="card">
1213
<p id="instructions">I'm thinking of a number between 1 and 100. Can you guess it?</p>
13-
<div id="controls">
14+
<div id="controls" class="controls">
1415
<input id="guess-input" type="number" min="1" max="100" placeholder="Enter your guess" />
1516
<button id="guess-btn" type="button">Guess</button>
1617
</div>

‎projects/number-guessing-game/styles.css‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
/* Basic reset */
2-
* { box-sizing: border-box; }
2+
/* Page-level layout is handled by assets/styles.css; only tweak specifics here */
33
html, body { height: 100%; }
44
body {
5-
margin: 0;
6-
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
7-
background: #0f172a; /* slate-900 */
8-
color: #e5e7eb; /* gray-200 */
95
display: flex;
106
flex-direction: column;
117
align-items: center;
8+
background: var(--bg);
9+
color: var(--text);
1210
}
1311

14-
h1 { margin: 24px 0 12px; font-size: 24px; font-weight: 700; color: #f8fafc; }
12+
h1 { margin: 24px 0 12px; font-size: 24px; font-weight: 700; color: var(--text); }
1513

1614
#game-container {
1715
width: 100%;
1816
max-width: 420px;
19-
background: #111827; /* gray-900 */
20-
border: 1px solid #1f2937; /* gray-800 */
17+
background: var(--card);
18+
border: 1px solid #262631;
2119
border-radius: 12px;
2220
padding: 20px;
23-
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
21+
box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
2422
}
2523

26-
#instructions { margin: 0 0 12px; color: #cbd5e1; /* slate-300 */ }
24+
#instructions { margin: 0 0 12px; color: var(--muted); }
2725

2826
#controls {
2927
display: flex;
@@ -33,38 +31,38 @@ h1 { margin: 24px 0 12px; font-size: 24px; font-weight: 700; color: #f8fafc; }
3331
#guess-input {
3432
flex: 1 1 auto;
3533
padding: 10px 12px;
36-
border: 1px solid #334155; /* slate-700 */
34+
border: 1px solid #2a2a33;
3735
border-radius: 8px;
3836
font-size: 14px;
3937
outline: none;
40-
background: #0b1220; /* deeper slate */
41-
color: #e5e7eb;
38+
background: #0e0e13;
39+
color: var(--text);
4240
}
43-
#guess-input::placeholder { color: #94a3b8; }
44-
#guess-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.25); }
41+
#guess-input::placeholder { color: var(--muted); }
42+
#guess-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,0.2); }
4543

4644
button {
4745
padding: 10px 14px;
4846
border-radius: 8px;
49-
border: 1px solid #1e3a8a; /* blue-900 */
50-
background: #1d4ed8; /* blue-700 */
51-
color: #eaf2ff;
47+
border: 1px solid #1e3a8a;
48+
background: linear-gradient(135deg, var(--accent), var(--accent-2));
49+
color: #0b1020;
5250
font-weight: 600;
5351
cursor: pointer;
5452
}
55-
button:hover { background: #1e40af; }
56-
button:disabled { background: #475569; border-color: #334155; color: #cbd5e1; cursor: not-allowed; }
53+
button:hover { filter: brightness(1.05); }
54+
button:disabled { background: #1f1f27; border-color: #2a2a33; color: var(--muted); cursor: not-allowed; }
5755

5856
#feedback { min-height: 22px; margin: 12px 0 8px; }
59-
#feedback[data-type="error"] { color: #f87171; /* red-400 */ }
60-
#feedback[data-type="low"], #feedback[data-type="high"] { color: #fbbf24; /* amber-400 */ }
61-
#feedback[data-type="success"] { color: #34d399; /* emerald-400 */ }
57+
#feedback[data-type="error"] { color: #f87171; }
58+
#feedback[data-type="low"], #feedback[data-type="high"] { color: #fbbf24; }
59+
#feedback[data-type="success"] { color: var(--accent); }
6260

63-
#attempts { margin: 0 0 12px; color: #94a3b8; }
61+
#attempts { margin: 0 0 12px; color: var(--muted); }
6462

6563
#restart-btn {
6664
width: 100%;
67-
background: #059669; /* emerald-600 */
68-
border-color: #065f46;
65+
background: linear-gradient(135deg, var(--accent), var(--accent-2));
66+
border-color: #1e3a8a;
6967
}
70-
#restart-btn:hover { background: #047857; }
68+
#restart-btn:hover { filter: brightness(1.05); }

0 commit comments

Comments
 (0)