A stream.place VOD client inspired by icarly.com
Fix header layout with grid system and enlarge logo
+75
-57
+54
-40
src/app/icarly.css
+54
-40
src/app/icarly.css
···
60
60
position: relative;
61
61
}
62
62
63
-
/* Header Section - SHARPER */
63
+
/* Header Section - SHARPER - Grid Layout */
64
64
.icarly-header {
65
65
background: linear-gradient(180deg, #4A5A8A 0%, #7BA05B 40%, #A6CC3A 100%);
66
66
border: 4px solid #fff;
67
67
border-bottom: none;
68
-
padding: 30px;
68
+
padding: 15px 30px 30px;
69
69
position: relative;
70
-
min-height: 260px;
70
+
min-height: 220px;
71
71
box-shadow: 0 0 20px rgba(0,0,0,0.3);
72
+
display: grid;
73
+
grid-template-columns: 280px 1fr 280px;
74
+
grid-template-rows: auto auto 1fr;
75
+
grid-template-areas:
76
+
"homepage homepage homepage"
77
+
"logo search login"
78
+
"date search info";
79
+
gap: 10px 20px;
72
80
}
73
81
74
82
/* Homepage button */
75
83
.homepage-btn {
76
-
position: absolute;
77
-
top: 15px;
78
-
left: 50%;
79
-
transform: translateX(-50%);
84
+
grid-area: homepage;
85
+
justify-self: center;
80
86
background: #000;
81
87
color: #fff;
82
88
padding: 8px 20px;
···
91
97
box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
92
98
animation: glow 2s infinite;
93
99
z-index: 20;
100
+
margin-bottom: 10px;
94
101
}
95
102
96
103
.homepage-btn:hover {
···
103
110
animation: spin 3s linear infinite;
104
111
}
105
112
106
-
/* Logo styling */
113
+
/* Logo styling - ENLARGED */
107
114
.icarly-logo {
108
-
position: absolute;
109
-
left: 30px;
110
-
top: 50px;
115
+
grid-area: logo;
116
+
align-self: start;
117
+
justify-self: start;
111
118
background: var(--icarly-magenta);
112
-
padding: 15px 30px;
119
+
padding: 20px 40px;
113
120
border: 4px solid #fff;
114
121
box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
115
122
z-index: 10;
116
123
transform: rotate(-3deg);
124
+
display: flex;
125
+
align-items: center;
126
+
justify-content: center;
117
127
}
118
128
119
129
.icarly-logo:hover {
···
121
131
}
122
132
123
133
.icarly-logo img {
124
-
height: 70px;
134
+
height: 90px;
125
135
width: auto;
136
+
object-fit: contain;
126
137
}
127
138
128
139
/* Date display */
129
140
.date-display {
130
-
position: absolute;
131
-
left: 30px;
132
-
top: 160px;
141
+
grid-area: date;
142
+
align-self: end;
133
143
color: #fff;
134
-
font-size: 20px;
144
+
font-size: 18px;
135
145
font-weight: bold;
136
146
text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
137
147
z-index: 5;
···
139
149
140
150
.lemon-tube {
141
151
color: #FF6347;
142
-
font-size: 28px;
152
+
font-size: 24px;
143
153
font-weight: bold;
144
154
text-shadow: 2px 2px 0 #fff;
145
155
margin-top: 5px;
···
147
157
148
158
/* Search section */
149
159
.search-section {
150
-
position: absolute;
151
-
left: 50%;
152
-
top: 90px;
153
-
transform: translateX(-50%);
160
+
grid-area: search;
161
+
align-self: center;
162
+
justify-self: center;
154
163
text-align: center;
155
164
z-index: 5;
156
165
}
157
166
158
167
.search-label {
159
168
color: #fff;
160
-
font-size: 32px;
169
+
font-size: 28px;
161
170
font-weight: bold;
162
171
text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
163
172
margin-bottom: 12px;
···
171
180
}
172
181
173
182
.search-input {
174
-
width: 300px;
183
+
width: 280px;
175
184
padding: 10px 20px;
176
185
border: 3px solid #fff;
177
186
font-size: 18px;
···
204
213
205
214
/* Login button */
206
215
.login-btn {
207
-
position: absolute;
208
-
right: 250px;
209
-
top: 100px;
216
+
grid-area: login;
217
+
align-self: center;
218
+
justify-self: end;
210
219
background: linear-gradient(180deg, #666 0%, #333 100%);
211
220
color: #fff;
212
221
padding: 15px 40px;
···
237
246
margin-top: 2px;
238
247
}
239
248
249
+
/* Info & Feedback container */
250
+
.header-right-widgets {
251
+
grid-area: info;
252
+
align-self: end;
253
+
justify-self: end;
254
+
display: flex;
255
+
flex-direction: column;
256
+
gap: 10px;
257
+
align-items: flex-end;
258
+
}
259
+
240
260
/* Info button */
241
261
.info-btn {
242
-
position: absolute;
243
-
right: 380px;
244
-
top: 20px;
245
262
background: #FF6B6B;
246
263
color: #fff;
247
-
padding: 12px 25px;
264
+
padding: 10px 20px;
248
265
font-weight: bold;
249
-
font-size: 16px;
266
+
font-size: 14px;
250
267
text-align: center;
251
268
line-height: 1.3;
252
269
border: 3px solid #fff;
···
265
282
266
283
/* Feedback button */
267
284
.feedback-btn {
268
-
position: absolute;
269
-
right: 30px;
270
-
top: 180px;
271
285
background: #FF4444;
272
286
color: #fff;
273
-
padding: 15px 25px;
287
+
padding: 12px 20px;
274
288
font-weight: bold;
275
-
font-size: 18px;
289
+
font-size: 16px;
276
290
text-align: center;
277
291
line-height: 1.2;
278
292
border: 3px solid #fff;
···
296
310
.character-image {
297
311
position: absolute;
298
312
right: 30px;
299
-
top: 30px;
300
-
width: 200px;
301
-
height: 200px;
313
+
top: 60px;
314
+
width: 180px;
315
+
height: 180px;
302
316
border: 6px solid #fff;
303
317
box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
304
318
overflow: hidden;
+21
-17
src/components/HomeClient.tsx
+21
-17
src/components/HomeClient.tsx
···
118
118
Homepage
119
119
</Link>
120
120
121
-
{/* Logo */}
121
+
{/* Logo - ENLARGED */}
122
122
<Link href="/" className="icarly-logo">
123
123
<Image
124
124
src="/iStream_Logo.png"
125
125
alt="iStream"
126
-
width={220}
127
-
height={90}
128
-
style={{ objectFit: 'contain' }}
126
+
width={300}
127
+
height={120}
128
+
style={{ objectFit: 'contain', width: '100%', height: 'auto' }}
129
+
priority
129
130
/>
130
131
</Link>
131
132
···
160
161
login
161
162
</a>
162
163
163
-
{/* Info button */}
164
-
<div className="info-btn">
165
-
click for <span>INFO</span><br />about iStream!
166
-
</div>
164
+
{/* Right side widgets container */}
165
+
<div className="header-right-widgets">
166
+
{/* Info button */}
167
+
<div className="info-btn">
168
+
click for <span>INFO</span><br />about iStream!
169
+
</div>
167
170
168
-
{/* Feedback button */}
169
-
<div className="feedback-btn">
170
-
feedback<br /><small>click 'til it hurts >></small>
171
+
{/* Feedback button */}
172
+
<div className="feedback-btn">
173
+
feedback<br /><small>click 'til it hurts >></small>
174
+
</div>
171
175
</div>
172
176
173
-
{/* Character image */}
177
+
{/* Character image - positioned outside grid */}
174
178
<div className="character-image">
175
179
<Image
176
180
src="/character-image.png"
177
181
alt="iStream Team"
178
-
width={200}
179
-
height={200}
182
+
width={180}
183
+
height={180}
180
184
style={{ objectFit: 'cover' }}
181
185
/>
182
186
</div>
183
187
184
-
{/* Fun floating labels */}
188
+
{/* Fun floating labels - positioned outside grid */}
185
189
<div className="fun-label" style={{
186
190
position: 'absolute',
187
-
top: '20px',
188
-
right: '450px',
191
+
top: '60px',
192
+
right: '220px',
189
193
background: '#FFD700',
190
194
padding: '10px 20px',
191
195
transform: 'rotate(-10deg)',