Skip to content

Commit 17712b1

Browse files
FluffzTheRagdollFluffzTheRagdoll
authored
Update style.css
KittyTasker is now responsive!
1 parent c4af224 commit 17712b1

1 file changed

Lines changed: 243 additions & 5 deletions

File tree

‎style.css‎

Lines changed: 243 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
body {
14-
font-family: Poiret One;
14+
font-family: Poiret One, Roboto;
1515
line-height: 2;
1616
color: #2c2c2c;
1717
background-color: #fbe4e4;
@@ -21,7 +21,7 @@ body {
2121

2222
/* Typography */
2323
h1, h2, h3 {
24-
font-family: Lobster;
24+
font-family: Lobster, Roboto;
2525
color: #533B4D;
2626
}
2727

@@ -53,27 +53,265 @@ h1, h2, h3 {
5353
/* Main Card*/
5454
.main-card {
5555
background-color: white;
56-
border-radius: 10%;
56+
border-radius: 60px;
5757
box-shadow: 0 25px 25px rgba(0, 0, 0, 0.07);
5858
overflow: hidden;
5959
}
6060

61-
/* Form Section Basic Styling */
61+
/* Form Section */
6262
.task-form-container {
6363
padding: 25px;
6464
background: linear-gradient(to right, #FFD6BA, #FFE8CD);
6565
}
6666

67-
/* Task Section Basic Styling */
67+
#task-form {
68+
display: flex;
69+
flex-direction: column;
70+
gap: 15px;
71+
}
72+
73+
.form-group label{
74+
display: block;
75+
margin-bottom: 5px;
76+
font-size: 15px;
77+
font-weight: 500;
78+
}
79+
80+
#task-input, #task-priority, #task-date {
81+
padding: 12px 15px;
82+
border: none;
83+
border-radius: 8px;
84+
font-size: 16px;
85+
width: 100%;
86+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
87+
background-color: white;
88+
}
89+
90+
#task-input:focus, #task-priority:focus, #task-date:focus {
91+
outline: none;
92+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
93+
}
94+
95+
.form-actions {
96+
display: flex;
97+
justify-content: flex-end;
98+
gap: 10px;
99+
}
100+
101+
button[type="submit"] {
102+
background-color: #FFC6C6;
103+
border: none;
104+
border-radius: 8px;
105+
padding: 12px 20px;
106+
font-weight: 500;
107+
cursor: pointer;
108+
}
109+
110+
.error {
111+
background-color: white;
112+
color: #43334C;
113+
padding: 8px 12px;
114+
border-radius: 5px;
115+
margin-top: 5px;
116+
font-size: 14px;
117+
display: block;
118+
}
119+
120+
/* Task Section */
68121
.tasks-container {
69122
padding: 25px;
70123
background: linear-gradient(to right, #FFE8CD, #FFDCDC);
71124
}
72125

126+
.section-header {
127+
display: flex;
128+
justify-content: space-between;
129+
align-items: center;
130+
margin-bottom: 20px;
131+
padding-bottom: 10px;
132+
border-bottom: 3px solid white;
133+
}
134+
135+
.section-title {
136+
font-size: 25px;
137+
font-weight: 500;
138+
}
139+
140+
/* Task Filter Navigation */
141+
nav {
142+
display: flex;
143+
gap: 12px;
144+
}
145+
146+
.filter-btn {
147+
background: none;
148+
border: none;
149+
font-family: Limelight;
150+
font-weight: 600;
151+
color: #533B4D;
152+
font-size: 15px;
153+
cursor: pointer;
154+
padding: 5px 10px;
155+
}
156+
157+
.filter-btn.active {
158+
color: #43334C;
159+
font-weight: 500;
160+
}
161+
162+
/* Task List */
163+
.task-item {
164+
list-style-type: none;
165+
}
166+
167+
/* Task Item Styling */
168+
.task-item {
169+
display: flex;
170+
align-items: center;
171+
padding: 16px 5px;
172+
border-bottom: 2.5px solid rgba(255, 255, 255, 0.773);
173+
margin-bottom: 20px;
174+
}
175+
176+
/* Priority Indicators */
177+
.task-item-high {
178+
border-left: 4px solid #f99ea6;
179+
}
180+
181+
.task-item-medium {
182+
border-left: 4px solid #fcc077;
183+
}
184+
185+
.task-item-low {
186+
border-left: 4px solid #acf9b4;
187+
}
188+
189+
/* Custom Checkbox */
190+
.task-checkbox {
191+
margin-right: 15px;
192+
width: 22px;
193+
height: 22px;
194+
cursor: pointer;
195+
accent-color: #E83C91;
196+
}
197+
198+
/* Task Content */
199+
.task-content {
200+
flex: 1;
201+
margin-right: 15px;
202+
}
203+
204+
.task-text {
205+
font-size: 16px;
206+
font-weight: 500;
207+
margin-bottom: 5px;
208+
}
209+
210+
.task-details {
211+
font-size: 12px;
212+
font-weight: 500;
213+
color: black;
214+
}
215+
216+
.task-completed .task-text {
217+
text-decoration: line-through;
218+
color: #535353;
219+
}
220+
221+
/* Delete Button */
222+
.delete-btn {
223+
background-color: transparent;
224+
border: none;
225+
cursor: pointer;
226+
padding: 5px;
227+
font-family: Limelight;
228+
font-weight: 600;
229+
color: #533B4D;
230+
}
231+
232+
/* Empty State */
233+
.empty-state {
234+
text-align: center;
235+
padding: 30px 20px;
236+
color: #a0a0a0;
237+
}
238+
239+
/* Task Summary */
240+
.task-summary {
241+
display: flex;
242+
justify-content: space-between;
243+
align-items: center;
244+
padding: 20px 5px 5px 5px;
245+
}
246+
247+
/* Clear completed button */
248+
#clear-completed-btn {
249+
background: none;
250+
border: none;
251+
font-family: Limelight;
252+
font-weight: 600;
253+
color: #533B4D;
254+
cursor: pointer;
255+
}
256+
257+
/* Image styles */
258+
#light-brown-kitten-with-green-eyes {
259+
height: 150px;
260+
margin-bottom: 0px;
261+
z-index: 1;
262+
flex: 10;
263+
}
264+
73265
/* Footer */
74266
.app-footer {
75267
margin-top: 25px;
76268
color: #EF88AD;
77269
font-size: 14px;
78270
font-weight: 600;
79271
}
272+
273+
/* Media Query */
274+
@media (max-width: 600px) {
275+
.section-header {
276+
flex-direction: column;
277+
align-items: flex-start;
278+
gap: 10px
279+
}
280+
281+
nav {
282+
width: 100%;
283+
justify-content: space-between;
284+
}
285+
286+
.form-actions {
287+
justify-content: stretch;
288+
}
289+
290+
button[type="submit"] {
291+
width: 100%;
292+
}
293+
294+
.tasks-summary {
295+
flex-direction: column;
296+
align-items: flex-start;
297+
gap: 10px;
298+
}
299+
300+
#clear-completed-btn {
301+
align-self: flex-end;
302+
}
303+
304+
/* Optimize for Touch */
305+
.task-checkbox {
306+
width: 24px;
307+
height: 24px;
308+
}
309+
310+
.delete-btn {
311+
padding: 8px;
312+
}
313+
314+
.filter-btn {
315+
padding: 8px 5px;
316+
}
317+
}

0 commit comments

Comments
 (0)