A stream.place VOD client inspired by icarly.com
Use transparent logo, remove background, and make tabs more rounded and glossy
+35
-23
+31
-19
src/app/icarly.css
+31
-19
src/app/icarly.css
···
115
115
grid-area: logo;
116
116
align-self: center;
117
117
justify-self: center;
118
-
background: var(--icarly-magenta);
119
-
padding: 20px 40px;
120
-
border: 5px solid #fff;
121
-
box-shadow: 8px 8px 0 rgba(0,0,0,0.4);
118
+
background: transparent;
119
+
padding: 0;
120
+
border: none;
121
+
box-shadow: none;
122
122
z-index: 10;
123
123
transform: rotate(-2deg);
124
124
display: flex;
125
125
align-items: center;
126
126
justify-content: center;
127
+
max-width: 300px;
127
128
}
128
129
129
130
.icarly-logo:hover {
···
131
132
}
132
133
133
134
.icarly-logo img {
134
-
height: 60px;
135
-
width: auto;
135
+
height: auto;
136
+
width: 100%;
137
+
max-height: 80px;
136
138
object-fit: contain;
137
139
}
138
140
···
349
351
.nav-tab {
350
352
background: linear-gradient(180deg, #B8A6D9 5%, #9B59B6 20%, #8844AA 50%, #7B3F8C 70%, #62166F 95%);
351
353
color: #fff;
352
-
padding: 12px 18px;
354
+
padding: 14px 22px;
353
355
font-weight: bold;
354
356
font-size: 13px;
355
357
text-transform: uppercase;
356
358
cursor: pointer;
357
-
border: 3px solid #fff;
358
-
border-bottom: none;
359
+
border: none;
359
360
position: relative;
360
361
top: 3px;
361
362
display: flex;
···
363
364
gap: 6px;
364
365
font-family: 'Comic Neue', cursive;
365
366
text-decoration: none;
367
+
border-radius: 20px 20px 0 0;
366
368
box-shadow:
367
-
inset 0 3px 8px rgba(255,255,255,0.4),
368
-
inset 0 -2px 5px rgba(0,0,0,0.3),
369
-
0 -2px 8px rgba(0,0,0,0.2);
370
-
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
369
+
inset 0 4px 12px rgba(255,255,255,0.5),
370
+
inset 0 -3px 8px rgba(0,0,0,0.4),
371
+
0 -3px 10px rgba(0,0,0,0.3),
372
+
0 0 0 2px rgba(255,255,255,0.3);
373
+
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
374
+
margin: 0 2px;
371
375
}
372
376
373
377
.nav-tab:first-child {
374
-
border-radius: 12px 0 0 0;
378
+
border-radius: 20px 20px 0 0;
379
+
margin-left: 0;
375
380
}
376
381
377
382
.nav-tab:last-child {
378
-
border-radius: 0 12px 0 0;
383
+
border-radius: 20px 20px 0 0;
384
+
margin-right: 0;
379
385
}
380
386
381
387
.nav-tab:hover {
382
388
background: linear-gradient(180deg, #C8B6E9 5%, #B069C6 20%, #9B54BA 50%, #9B4F9C 70%, #82267F 95%);
383
389
top: 1px;
390
+
box-shadow:
391
+
inset 0 4px 14px rgba(255,255,255,0.6),
392
+
inset 0 -3px 8px rgba(0,0,0,0.3),
393
+
0 -2px 8px rgba(0,0,0,0.25),
394
+
0 0 0 2px rgba(255,255,255,0.4);
384
395
}
385
396
386
397
.nav-tab.active {
387
398
background: linear-gradient(180deg, #fff 0%, #f8f8f8 50%, #f0f0f0 100%);
388
399
color: #62166F;
389
400
top: 0;
390
-
padding-bottom: 16px;
401
+
padding-bottom: 18px;
391
402
box-shadow:
392
-
inset 0 3px 8px rgba(255,255,255,1),
393
-
inset 0 -2px 5px rgba(200,200,200,0.3),
394
-
0 -3px 12px rgba(0,0,0,0.15);
403
+
inset 0 4px 12px rgba(255,255,255,1),
404
+
inset 0 -2px 6px rgba(200,200,200,0.4),
405
+
0 -4px 15px rgba(0,0,0,0.2),
406
+
0 0 0 2px rgba(255,255,255,0.5);
395
407
text-shadow: none;
396
408
}
397
409
+4
-4
src/components/HomeClient.tsx
+4
-4
src/components/HomeClient.tsx
···
153
153
Homepage
154
154
</Link>
155
155
156
-
{/* Logo - Using bigger version */}
156
+
{/* Logo - Using transparent version */}
157
157
<Link href="/" className="icarly-logo">
158
158
<Image
159
-
src="/iStream-Bigger.png"
159
+
src="/iStream_Logo.png"
160
160
alt="iStream"
161
-
width={280}
162
-
height={100}
161
+
width={400}
162
+
height={211}
163
163
style={{ objectFit: 'contain', width: '100%', height: 'auto' }}
164
164
priority
165
165
/>