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

Fix animations

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 07:23:13 +07:00
parent 2cde8401d3
commit 4b954eaa7e
4 changed files with 213 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
css/style.css
View File

@@ -378,22 +378,39 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
top: 0; right: 0;
width: 230px; height: 300px;
background: linear-gradient(160deg, var(--sf-coral), #8B2A2A);
transform: rotate(6deg);
z-index: 3;
animation: card-sway-1 4.2s ease-in-out infinite alternate;
}
.sfB-stack-card.c2 {
top: 60px; right: 200px;
width: 200px; height: 260px;
background: linear-gradient(160deg, var(--sf-teal), var(--sf-teal-deep));
transform: rotate(-8deg);
z-index: 2;
animation: card-sway-2 5.1s ease-in-out infinite alternate;
animation-delay: -2.3s;
}
.sfB-stack-card.c3 {
top: 220px; right: 80px;
width: 220px; height: 220px;
background: linear-gradient(160deg, var(--sf-orange), #B85A1F);
transform: rotate(3deg);
z-index: 4;
animation: card-sway-3 3.7s ease-in-out infinite alternate;
animation-delay: -1.1s;
}
.sfB-stack-card.c1:hover { animation-duration: 1.6s; }
.sfB-stack-card.c2:hover { animation-duration: 1.9s; }
.sfB-stack-card.c3:hover { animation-duration: 1.4s; }
@keyframes card-sway-1 {
from { transform: rotate(4deg) translateY(2px); }
to { transform: rotate(8deg) translateY(-10px); }
}
@keyframes card-sway-2 {
from { transform: rotate(-10deg) translateY(-3px); }
to { transform: rotate(-6deg) translateY(-13px); }
}
@keyframes card-sway-3 {
from { transform: rotate(1deg) translateY(0px); }
to { transform: rotate(5deg) translateY(-9px); }
}
.sfB-stack-card .ph {
position: absolute;
@@ -629,9 +646,15 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
background-clip: text;
color: transparent;
}
.sfB-tcard .day-date {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
letter-spacing: 0;
vertical-align: middle;
}
.sfB-tcard .when {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-size: 13px;
letter-spacing: 1px;
color: rgba(255,255,255,0.5);
margin-top: 4px;
@@ -644,6 +667,14 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
line-height: 1.1;
letter-spacing: -0.3px;
}
.sfB-tcard .organizer {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.38);
margin-top: 4px;
text-transform: uppercase;
}
.sfB-tcard .at { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 5px; }
.sfB-tcard .chips { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }