alexandrump/andaquenosabesna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nuevo fondo del hero: foto de Álex y Juan con el neón

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSyR5Zw5eGj6oPTRVjvP1b
This commit is contained in:
Alex
2026-10-21 21:28:44 +02:00
co-authored by Claude Sonnet 5.5
parent 9835fe190f
commit dac9449075
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.py
+1 -1
View File
@@ -65,7 +65,7 @@ pop_videos = sorted(pop_videos, key=lambda v: -v['views'])[:POP_VIDEOS_SHOWN]
pop_shorts = sorted(pop_shorts, key=lambda v: -v['views'])[:POP_SHORTS_SHOWN] pop_shorts = sorted(pop_shorts, key=lambda v: -v['views'])[:POP_SHORTS_SHOWN]
KEEP = {'avatar.jpg', 'banner.jpg'} KEEP = {'avatar.jpg', 'banner.jpg', 'fondo.jpg'}
# (nombre en YouTube, ancho máx. al guardar) por orden de preferencia # (nombre en YouTube, ancho máx. al guardar) por orden de preferencia
SOURCES = { SOURCES = {
'video': [('maxresdefault', 1280), ('sddefault', 960), ('hqdefault', 960)], 'video': [('maxresdefault', 1280), ('sddefault', 960), ('hqdefault', 960)],
public/img/fondo.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

public/styles.css
+14 -6
View File
@@ -50,14 +50,22 @@ a { color: inherit; text-decoration: none; }
.hero-bg { .hero-bg {
position: absolute; inset: 0; position: absolute; inset: 0;
background: background:
radial-gradient(60% 50% at 50% 38%, rgba(46, 230, 255, .16), transparent 70%), radial-gradient(52% 46% at 50% 52%, rgba(6, 8, 13, .72), rgba(6, 8, 13, .35) 70%, transparent 100%),
linear-gradient(180deg, rgba(6, 8, 13, .78) 0%, rgba(6, 8, 13, .92) 65%, var(--bg) 100%), linear-gradient(180deg, rgba(6, 8, 13, .45) 0%, rgba(6, 8, 13, .25) 40%, rgba(6, 8, 13, .7) 82%, var(--bg) 100%),
url("img/banner.jpg") center / cover no-repeat; url("img/fondo.jpg") center 40% / cover no-repeat;
filter: blur(2px) saturate(.9); transform: scale(1.03);
transform: scale(1.04);
animation: drift 18s ease-in-out infinite alternate; animation: drift 18s ease-in-out infinite alternate;
} }
@keyframes drift { to { transform: scale(1.1) translateY(-1.5%); } } @media (max-width: 760px) {
/* en vertical la foto se muestra entera (ancho completo, arriba) y se funde con el fondo por abajo */
.hero-bg {
background:
radial-gradient(70% 38% at 50% 58%, rgba(6, 8, 13, .6), transparent 100%),
linear-gradient(180deg, rgba(6, 8, 13, .5) 0%, rgba(6, 8, 13, .12) 22%, rgba(6, 8, 13, .6) 42%, var(--bg) 55%),
url("img/fondo.jpg") top center / 100% auto no-repeat var(--bg);
}
}
@keyframes drift { to { transform: scale(1.08) translateY(-1%); } }
.hero-inner { position: relative; max-width: 760px; } .hero-inner { position: relative; max-width: 760px; }
.neon { .neon {
width: clamp(130px, 22vw, 190px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto 18px; border-radius: 50%; width: clamp(130px, 22vw, 190px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto 18px; border-radius: 50%;