Skip to content

Commit f1af226

Browse files
RandallGraidaRandallGraida
committed
add dev branch
1 parent 14774a6 commit f1af226

3 files changed

Lines changed: 163 additions & 0 deletions

File tree

‎src/js/pomodoro.js‎

Whitespace-only changes.

‎src/pomodoro.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
<title>GDG Countdown App</title>
7+
</head>
8+
<body>
9+
<h1>GDG Countdown to internships</h1>
10+
<script src="./js/pomodoro.js"></script>
11+
</body>
12+
</html>

‎src/styles/pomodoro.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/* Base reset */
2+
*,
3+
*::before,
4+
*::after {
5+
box-sizing: border-box;
6+
}
7+
* {
8+
margin: 0;
9+
}
10+
body {
11+
min-height: 100vh;
12+
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
13+
line-height: 1.5;
14+
background: #f8fafc;
15+
color: #0f172a;
16+
text-rendering: optimizeLegibility;
17+
-webkit-font-smoothing: antialiased;
18+
}
19+
img,
20+
picture,
21+
video,
22+
canvas,
23+
svg {
24+
display: block;
25+
max-width: 100%;
26+
}
27+
input,
28+
button,
29+
textarea,
30+
select {
31+
font: inherit;
32+
}
33+
a {
34+
color: inherit;
35+
text-decoration: none;
36+
}
37+
button {
38+
cursor: pointer;
39+
border: none;
40+
background: none;
41+
}
42+
ul,
43+
ol {
44+
list-style: none;
45+
padding: 0;
46+
}
47+
48+
/* Layout helpers */
49+
.container {
50+
width: min(1100px, 90vw);
51+
margin: 0 auto;
52+
}
53+
.grid {
54+
display: grid;
55+
gap: 1rem;
56+
}
57+
.flex {
58+
display: flex;
59+
gap: 1rem;
60+
align-items: center;
61+
}
62+
.center {
63+
display: grid;
64+
place-items: center;
65+
}
66+
67+
/* Typography */
68+
h1,
69+
h2,
70+
h3,
71+
h4,
72+
h5,
73+
h6 {
74+
line-height: 1.2;
75+
font-weight: 700;
76+
color: #0f172a;
77+
}
78+
p {
79+
max-width: 65ch;
80+
}
81+
82+
/* Buttons */
83+
.btn {
84+
display: inline-flex;
85+
align-items: center;
86+
justify-content: center;
87+
padding: 0.65rem 1rem;
88+
border-radius: 0.5rem;
89+
font-weight: 600;
90+
background: #2563eb;
91+
color: #fff;
92+
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
93+
}
94+
.btn:hover {
95+
background: #1d4ed8;
96+
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
97+
transform: translateY(-1px);
98+
}
99+
.btn:active {
100+
transform: translateY(0);
101+
box-shadow: none;
102+
}
103+
104+
/* Form basics */
105+
input,
106+
textarea,
107+
select {
108+
width: 100%;
109+
padding: 0.6rem 0.75rem;
110+
border: 1px solid #cbd5e1;
111+
border-radius: 0.45rem;
112+
background: #fff;
113+
color: #0f172a;
114+
transition: border-color 120ms ease, box-shadow 120ms ease;
115+
}
116+
input:focus,
117+
textarea:focus,
118+
select:focus {
119+
outline: none;
120+
border-color: #2563eb;
121+
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
122+
}
123+
124+
/* Cards */
125+
.card {
126+
background: #fff;
127+
border: 1px solid #e2e8f0;
128+
border-radius: 0.75rem;
129+
padding: 1.25rem;
130+
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
131+
}
132+
133+
/* Spacing utilities */
134+
.mt-1 { margin-top: 0.25rem; }
135+
.mt-2 { margin-top: 0.5rem; }
136+
.mt-3 { margin-top: 1rem; }
137+
.mt-4 { margin-top: 1.5rem; }
138+
.mb-1 { margin-bottom: 0.25rem; }
139+
.mb-2 { margin-bottom: 0.5rem; }
140+
.mb-3 { margin-bottom: 1rem; }
141+
.mb-4 { margin-bottom: 1.5rem; }
142+
.p-1 { padding: 0.25rem; }
143+
.p-2 { padding: 0.5rem; }
144+
.p-3 { padding: 1rem; }
145+
.p-4 { padding: 1.5rem; }
146+
147+
/* Media queries */
148+
@media (max-width: 768px) {
149+
body { font-size: 15px; }
150+
.container { width: min(100%, 92vw); }
151+
}

0 commit comments

Comments
 (0)