A stream.place VOD client inspired by icarly.com
Completely redesign header layout for cleaner organization
- Simplified grid layout with 3 columns: logo, search, right-column
- Right column contains: character image on top, buttons stacked below
- Buttons: login, info, feedback - all uniform width and styled
- Removed floating/mispositioned elements
- Clean vertical organization in right column
+97
-112
+63
-76
src/app/icarly.css
+63
-76
src/app/icarly.css
···
60
60
position: relative;
61
61
}
62
62
63
-
/* Header Section - SHARPER - Grid Layout */
63
+
/* Header Section - Clean 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: 15px 240px 30px 30px;
68
+
padding: 15px 30px 25px 30px;
69
69
position: relative;
70
-
min-height: 260px;
70
+
min-height: 280px;
71
71
box-shadow: 0 0 20px rgba(0,0,0,0.3);
72
72
display: grid;
73
-
grid-template-columns: 320px 1fr 180px;
74
-
grid-template-rows: auto auto 1fr;
73
+
grid-template-columns: 320px 1fr 220px;
74
+
grid-template-rows: auto 1fr auto;
75
75
grid-template-areas:
76
-
"homepage homepage homepage"
77
-
"logo search widgets"
78
-
"date search widgets";
79
-
gap: 15px 25px;
76
+
"homepage homepage rightcol"
77
+
"logo search rightcol"
78
+
"date search rightcol";
79
+
gap: 15px 30px;
80
80
}
81
81
82
82
/* Homepage button */
···
211
211
transform: scale(1.1) rotate(10deg);
212
212
}
213
213
214
-
/* Login button */
215
-
.login-btn {
216
-
grid-area: login;
217
-
align-self: center;
218
-
justify-self: end;
219
-
background: linear-gradient(180deg, #666 0%, #333 100%);
220
-
color: #fff;
221
-
padding: 15px 40px;
222
-
font-size: 22px;
223
-
font-weight: bold;
224
-
border: 3px solid #fff;
225
-
cursor: pointer;
226
-
box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
227
-
text-decoration: none;
214
+
/* Right column container */
215
+
.header-right-column {
216
+
grid-area: rightcol;
228
217
display: flex;
229
218
flex-direction: column;
230
219
align-items: center;
231
-
justify-content: center;
232
-
line-height: 1;
233
-
z-index: 5;
234
-
animation: wiggle 3s ease-in-out infinite;
220
+
gap: 15px;
221
+
padding-top: 10px;
222
+
}
223
+
224
+
/* Character image */
225
+
.character-image {
226
+
width: 200px;
227
+
height: 200px;
228
+
border: 5px solid #fff;
229
+
box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
230
+
overflow: hidden;
231
+
animation: float 5s ease-in-out infinite;
232
+
background: #fff;
235
233
}
236
234
237
-
.login-btn:hover {
238
-
animation: none;
239
-
transform: scale(1.05);
235
+
.character-image:hover {
236
+
animation: wiggle 0.3s ease-in-out;
240
237
}
241
238
242
-
.login-btn::after {
243
-
content: "→";
244
-
display: block;
245
-
font-size: 16px;
246
-
margin-top: 2px;
239
+
.character-image img {
240
+
width: 100%;
241
+
height: 100%;
242
+
object-fit: cover;
247
243
}
248
244
249
-
/* Info & Feedback container */
250
-
.header-right-widgets {
251
-
grid-area: widgets;
252
-
align-self: center;
253
-
justify-self: end;
245
+
/* Buttons container */
246
+
.header-buttons {
254
247
display: flex;
255
248
flex-direction: column;
256
-
gap: 15px;
257
-
align-items: flex-end;
249
+
gap: 10px;
258
250
width: 100%;
259
-
padding-right: 10px;
251
+
align-items: center;
260
252
}
261
253
262
-
/* Info button */
263
-
.info-btn {
264
-
background: #FF6B6B;
265
-
color: #fff;
266
-
padding: 10px 16px;
254
+
/* Header buttons */
255
+
.header-btn {
256
+
padding: 10px 15px;
267
257
font-weight: bold;
268
-
font-size: 12px;
269
258
text-align: center;
270
259
line-height: 1.3;
271
260
border: 3px solid #fff;
272
-
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
273
-
z-index: 5;
274
-
width: 140px;
275
261
cursor: pointer;
262
+
width: 180px;
276
263
transition: transform 0.2s;
264
+
text-decoration: none;
265
+
display: block;
277
266
}
278
267
279
-
.info-btn:hover {
280
-
animation: wiggle 0.3s ease-in-out;
281
-
transform: translateY(-2px);
268
+
.header-btn:hover {
269
+
transform: translateY(-3px);
270
+
box-shadow: 0 6px 0 rgba(0,0,0,0.2);
282
271
}
283
272
284
-
.info-btn span {
285
-
color: var(--icarly-yellow);
273
+
.login-header-btn {
274
+
background: linear-gradient(180deg, #666 0%, #333 100%);
275
+
color: #fff;
276
+
font-size: 16px;
286
277
}
287
278
288
-
/* Feedback button */
289
-
.feedback-btn {
290
-
background: #FF4444;
279
+
.info-header-btn {
280
+
background: #FF6B6B;
291
281
color: #fff;
292
-
padding: 12px 16px;
293
-
font-weight: bold;
294
-
font-size: 14px;
295
-
text-align: center;
296
-
line-height: 1.2;
297
-
border: 3px solid #fff;
298
-
box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
299
-
cursor: pointer;
300
-
z-index: 5;
301
-
width: 140px;
302
-
transition: transform 0.2s;
282
+
font-size: 13px;
303
283
}
304
284
305
-
.feedback-btn:hover {
306
-
animation: wiggle 0.3s ease-in-out;
307
-
transform: translateY(-2px);
285
+
.info-header-btn .btn-highlight {
286
+
color: #FFD700;
287
+
}
288
+
289
+
.feedback-header-btn {
290
+
background: #FF4444;
291
+
color: #fff;
292
+
font-size: 14px;
308
293
}
309
294
310
-
.feedback-btn small {
295
+
.feedback-header-btn small {
311
296
font-size: 11px;
312
-
color: var(--icarly-yellow);
297
+
color: #FFD700;
298
+
display: block;
299
+
margin-top: 2px;
313
300
}
314
301
315
302
/* Character image - positioned in top right */
+34
-36
src/components/HomeClient.tsx
+34
-36
src/components/HomeClient.tsx
···
148
148
/>
149
149
</Link>
150
150
151
-
{/* Date */}
152
-
<div className="date-display">
153
-
<div>Today is {today}</div>
154
-
<div className="lemon-tube">"LEMON TUBE"</div>
155
-
</div>
156
-
157
151
{/* Search */}
158
152
<div className="search-section">
159
153
<div className="search-label">search our site</div>
···
169
163
</div>
170
164
</div>
171
165
172
-
{/* Login */}
173
-
<a
174
-
href="https://stream.place/login"
175
-
target="_blank"
176
-
rel="noopener noreferrer"
177
-
className="login-btn"
178
-
>
179
-
login
180
-
</a>
166
+
{/* Date */}
167
+
<div className="date-display">
168
+
<div>Today is {today}</div>
169
+
<div className="lemon-tube">"LEMON TUBE"</div>
170
+
</div>
181
171
182
-
{/* Right side widgets container */}
183
-
<div className="header-right-widgets">
184
-
{/* Info button */}
185
-
<div className="info-btn">
186
-
click for <span>INFO</span><br />about iStream!
172
+
{/* Right side column with character image and buttons */}
173
+
<div className="header-right-column">
174
+
{/* Character image at top */}
175
+
<div className="character-image">
176
+
<Image
177
+
src="/character-image.png"
178
+
alt="iStream Team"
179
+
width={200}
180
+
height={200}
181
+
style={{ objectFit: 'cover' }}
182
+
priority
183
+
/>
187
184
</div>
188
-
189
-
{/* Feedback button */}
190
-
<div className="feedback-btn">
191
-
feedback<br /><small>click 'til it hurts >></small>
185
+
186
+
{/* Buttons stacked below */}
187
+
<div className="header-buttons">
188
+
<a
189
+
href="https://stream.place/login"
190
+
target="_blank"
191
+
rel="noopener noreferrer"
192
+
className="header-btn login-header-btn"
193
+
>
194
+
login →
195
+
</a>
196
+
<div className="header-btn info-header-btn">
197
+
<span className="btn-highlight">INFO</span> about iStream!
198
+
</div>
199
+
<div className="header-btn feedback-header-btn">
200
+
feedback <small>click 'til it hurts >></small>
201
+
</div>
192
202
</div>
193
-
</div>
194
-
195
-
{/* Character image */}
196
-
<div className="character-image">
197
-
<Image
198
-
src="/character-image.png"
199
-
alt="iStream Team"
200
-
width={200}
201
-
height={200}
202
-
style={{ objectFit: 'cover' }}
203
-
priority
204
-
/>
205
203
</div>
206
204
</header>
207
205