Skip to content

Commit 484ea23

Browse files
TarawallyTarawally
committed
style css: update colour palette and typography to match example
1 parent 5e70e21 commit 484ea23

File tree

1 file changed

+54
-116
lines changed

1 file changed

+54
-116
lines changed

‎Sprint-3/quote-generator/style.css‎

Lines changed: 54 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
/** Write your CSS in here **/
22

33
:root {
4-
--primary-color: #6366f1;
5-
--secondary-color: #a855f7;
6-
--accent-color: #ec4899;
7-
--text-color: #1f2937;
8-
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
9-
--glass-bg: rgba(255, 255, 255, 0.95);
10-
--glass-border: rgba(255, 255, 255, 0.3);
11-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
12-
0 4px 6px -2px rgba(0, 0, 0, 0.05);
4+
--primary-color: #f5ac2d;
5+
--text-color: #f5ac2d;
6+
--bg-color: #f5ac2d;
7+
--card-bg: #ffffff;
138
--transition-speed: 0.3s;
149
}
1510

@@ -20,152 +15,101 @@
2015
}
2116

2217
body {
23-
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
24-
Helvetica, Arial, sans-serif;
25-
background: var(--bg-gradient);
18+
font-family: Georgia, 'Times New Roman', Times, serif;
19+
background-color: var(--bg-color);
2620
min-height: 100vh;
2721
display: flex;
2822
justify-content: center;
2923
align-items: center;
30-
color: var(--text-color);
3124
padding: 1rem;
3225
}
3326

3427
.container {
35-
background: var(--glass-bg);
36-
backdrop-filter: blur(10px);
37-
-webkit-backdrop-filter: blur(10px);
38-
border: 1px solid var(--glass-border);
39-
border-radius: 1.5rem;
40-
padding: 3rem;
28+
background: var(--card-bg);
29+
padding: 3rem 4rem;
4130
width: 100%;
42-
max-width: 600px;
43-
box-shadow: var(--shadow-lg);
31+
max-width: 700px;
4432
text-align: center;
45-
transition: transform var(--transition-speed) ease;
46-
}
47-
48-
.container:hover {
49-
transform: translateY(-5px);
33+
position: relative;
34+
/* Simple crisp shadow or none based on flat design of example, keeping slight shadow for visibility */
35+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
5036
}
5137

5238
h1 {
53-
font-size: 2.5rem;
54-
font-weight: 800;
55-
margin-bottom: 2rem;
56-
background: linear-gradient(
57-
to right,
58-
var(--primary-color),
59-
var(--accent-color)
60-
);
61-
-webkit-background-clip: text;
62-
background-clip: text;
63-
color: transparent;
64-
letter-spacing: -0.025em;
39+
display: none; /* The example image doesn't show a visible title inside the card */
6540
}
6641

6742
#quote {
68-
font-size: 1.5rem;
69-
line-height: 1.6;
70-
font-weight: 500;
43+
font-size: 1.8rem;
44+
line-height: 1.4;
45+
color: var(--text-color);
7146
margin-bottom: 1.5rem;
72-
color: #374151;
73-
font-style: italic;
7447
position: relative;
75-
padding: 0 1rem;
48+
padding-left: 3rem; /* Space for the quote icon */
49+
text-align: left;
7650
}
7751

78-
#quote::before,
79-
#quote::after {
80-
content: '"';
81-
font-size: 3rem;
52+
#quote::before {
53+
content: '“'; /* Large quote mark using curved quotes */
54+
font-size: 6rem;
8255
color: var(--primary-color);
83-
opacity: 0.2;
8456
position: absolute;
57+
top: -1.5rem;
58+
left: -1rem;
8559
line-height: 1;
86-
}
87-
88-
#quote::before {
89-
top: -1rem;
90-
left: -0.5rem;
91-
}
92-
93-
#quote::after {
94-
bottom: -1.5rem;
95-
right: -0.5rem;
60+
font-family: sans-serif; /* Quote marks often look better in sans-serif or specific fonts */
61+
opacity: 1; /* Solid colour in example */
9662
}
9763

9864
#author {
9965
font-size: 1.1rem;
100-
color: #6b7280;
101-
font-weight: 600;
66+
color: var(--text-color);
10267
margin-bottom: 2.5rem;
103-
display: flex;
104-
align-items: center;
105-
justify-content: center;
106-
gap: 0.5rem;
68+
text-align: right;
69+
font-style: italic; /* Authors are often italicized in this style */
10770
}
10871

72+
/* Add dash before author if not present in JS, but here we style assuming content */
10973
#author::before {
110-
content: "";
111-
display: block;
112-
width: 30px;
113-
height: 2px;
114-
background: linear-gradient(
115-
to right,
116-
var(--primary-color),
117-
var(--secondary-color)
118-
);
74+
content: '- ';
11975
}
12076

12177
.controls {
12278
display: flex;
12379
flex-direction: column;
124-
gap: 1.5rem;
125-
align-items: center;
80+
align-items: flex-end; /* Button aligned to right in some designs, or center. Example shows right or center. Let's align right to match typical 'next' flows or keep center if safer. Example looks right-aligned for button. */
12681
}
12782

12883
button {
129-
background: linear-gradient(
130-
to right,
131-
var(--primary-color),
132-
var(--secondary-color)
133-
);
84+
background-color: var(--primary-color);
13485
color: white;
13586
border: none;
136-
padding: 1rem 2rem;
137-
font-size: 1.1rem;
138-
font-weight: 600;
139-
border-radius: 9999px;
87+
padding: 0.8rem 1.5rem;
88+
font-size: 1rem;
89+
font-family: Arial, sans-serif;
14090
cursor: pointer;
141-
transition: all var(--transition-speed) ease;
142-
box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.4);
91+
transition: opacity var(--transition-speed) ease;
92+
font-weight: bold;
14393
}
14494

14595
button:hover {
146-
transform: translateY(-2px);
147-
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.5);
148-
filter: brightness(1.1);
149-
}
150-
151-
button:active {
152-
transform: translateY(0);
96+
opacity: 0.9;
15397
}
15498

155-
/* Auto-play Switch */
99+
/* Auto-play Switch - adjusting to fit the new theme */
156100
.auto-play-container {
157101
display: flex;
158102
align-items: center;
159103
gap: 1rem;
160-
background: rgba(0, 0, 0, 0.05);
161-
padding: 0.75rem 1.5rem;
162-
border-radius: 1rem;
104+
margin-top: 1rem; /* Separate from main button */
105+
align-self: flex-end;
163106
}
164107

165108
.switch-label {
166-
font-weight: 600;
109+
font-weight: normal;
167110
font-size: 0.9rem;
168-
color: #4b5563;
111+
color: var(--text-color);
112+
font-family: Arial, sans-serif;
169113
}
170114

171115
.switch {
@@ -188,9 +132,9 @@ button:active {
188132
left: 0;
189133
right: 0;
190134
bottom: 0;
191-
background-color: #ccc;
192-
transition: 0.4s;
193-
border-radius: 34px;
135+
background-color: #e4e4e4; /* Light grey for off */
136+
transition: .4s;
137+
border-radius: 0; /* Square/Rectangular look or keep rounded? Let's keep rounded for standard UI toggle */
194138
}
195139

196140
.slider:before {
@@ -201,16 +145,11 @@ button:active {
201145
left: 3px;
202146
bottom: 3px;
203147
background-color: white;
204-
transition: 0.4s;
205-
border-radius: 50%;
148+
transition: .4s;
206149
}
207150

208151
input:checked + .slider {
209-
background: linear-gradient(
210-
to right,
211-
var(--primary-color),
212-
var(--secondary-color)
213-
);
152+
background-color: var(--primary-color);
214153
}
215154

216155
input:focus + .slider {
@@ -223,15 +162,14 @@ input:checked + .slider:before {
223162

224163
.status-indicator {
225164
font-size: 0.8rem;
226-
font-weight: 700;
227-
color: var(--accent-color);
165+
font-weight: bold;
166+
color: var(--primary-color);
228167
opacity: 0;
229-
transform: translateY(10px);
230-
transition: all 0.3s ease;
231-
height: 1.2em;
168+
margin-top: 0.5rem;
169+
align-self: flex-end;
170+
font-family: Arial, sans-serif;
232171
}
233172

234173
.status-indicator.active {
235174
opacity: 1;
236-
transform: translateY(0);
237175
}

0 commit comments

Comments
 (0)