Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve background

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 12:26:14 +07:00
parent acfc16f9fd
commit ab99588e14
7 changed files with 58 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
classes/index.html
View File

@@ -19,6 +19,7 @@
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">

1
connect/index.html
View File

@@ -19,6 +19,7 @@
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">

59
css/style.css
View File

@@ -37,15 +37,58 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
} }
.sfB-bg::before {
content: ''; @keyframes blob-pulse {
0%, 100% { opacity: 0.22; }
50% { opacity: 0.85; }
}
/* 5 blobs in non-overlapping screen zones, each pulsing at its own pace */
.sfB-bg > span {
position: absolute; position: absolute;
inset: -10%; border-radius: 50%;
background: filter: blur(80px);
radial-gradient(ellipse 60% 50% at 80% 0%, rgba(242,107,107,0.30), transparent 60%), animation: blob-pulse ease-in-out infinite;
radial-gradient(ellipse 50% 40% at 10% 30%, rgba(46,139,149,0.25), transparent 60%), }
radial-gradient(ellipse 40% 30% at 50% 90%, rgba(242,201,76,0.18), transparent 60%); /* coral — top-right */
filter: blur(60px); .sfB-bg > span:nth-child(1) {
width: 44vw; height: 42vh;
right: -8%; top: -10%;
background: rgba(242, 107, 107, 0.38);
animation-duration: 11s;
animation-delay: 0s;
}
/* teal — left, upper-mid */
.sfB-bg > span:nth-child(2) {
width: 37vw; height: 48vh;
left: -8%; top: 36%;
background: rgba(46, 139, 149, 0.32);
animation-duration: 14s;
animation-delay: -3s;
}
/* gold — bottom-center-left */
.sfB-bg > span:nth-child(3) {
width: 32vw; height: 30vh;
left: 16%; bottom: -8%;
background: rgba(242, 201, 76, 0.28);
animation-duration: 9s;
animation-delay: -6s;
}
/* orange — top-left */
.sfB-bg > span:nth-child(4) {
width: 33vw; height: 34vh;
left: -5%; top: -8%;
background: rgba(232, 87, 42, 0.30);
animation-duration: 16s;
animation-delay: -1s;
}
/* pink — bottom-right */
.sfB-bg > span:nth-child(5) {
width: 38vw; height: 37vh;
right: -5%; bottom: 2%;
background: rgba(224, 91, 126, 0.26);
animation-duration: 12s;
animation-delay: -8s;
} }
.sfB-bg::after { .sfB-bg::after {
content: ''; content: '';

1
festivals/index.html
View File

@@ -19,6 +19,7 @@
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">

1
index.html
View File

@@ -20,6 +20,7 @@
<!-- Background blobs --> <!-- Background blobs -->
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">

3
schedule/index.html
View File

@@ -19,6 +19,7 @@
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
@@ -145,7 +146,7 @@
if (f === 'all') { row.style.display = ''; return; } if (f === 'all') { row.style.display = ''; return; }
const music = row.querySelector('.col-music')?.textContent.toLowerCase() || ''; const music = row.querySelector('.col-music')?.textContent.toLowerCase() || '';
const city = row.querySelector('.col-city')?.textContent.toLowerCase() || ''; const city = row.querySelector('.col-city')?.textContent.toLowerCase() || '';
const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f); const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f === 'hoian' ? 'hoi an' : f);
row.style.display = show ? '' : 'none'; row.style.display = show ? '' : 'none';
}); });
}); });

1
studios/index.html
View File

@@ -19,6 +19,7 @@
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">