admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(marquee): dim baseline 20%, scatter flicker order (no adjacent tags lit)

Browse Source
This commit is contained in:
root committed 2026-09-19 15:32:30 +02:00
1 parent 66ab7d98be
commit e8c27898a7
1 file changed
+19 -18
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+19 -18
View File
@@ -5499,7 +5499,7 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
.marquee-grid__cell {
margin: 0;
flex: 0 0 auto;
opacity: 0.1;
opacity: 0.2;
animation: tagFlicker var(--tag-cycle, 15s) ease-in-out infinite;
}
.marquee-grid__cell .hero__tag {
@@ -5516,29 +5516,30 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
line-height: 1.4;
}
/* Flicker: теги держим на базовом уровне 10%, по очереди (по 3 за раз) вспыхивают до 100%.
Цикл 15s, шаг 1s; яркими (≈100%) одновременно ≤3 тега, остальные тускло видны (10%). */
.marquee-grid__cell:nth-child(1) { animation-delay: -1s; }
.marquee-grid__cell:nth-child(2) { animation-delay: -2s; }
.marquee-grid__cell:nth-child(3) { animation-delay: -3s; }
.marquee-grid__cell:nth-child(4) { animation-delay: -4s; }
/* Flicker: теги держим на базовом уровне 20%, по очереди (по 3 за раз, вразнобой) вспыхивают до 100%.
Задержки — перестановка со шагом 7 (взаимно просто с 15), чтобы горели не соседние, а разбросанные теги.
Цикл 15s, шаг 1s; яркими (≈100%) одновременно ≤3 тега, остальные тускло видны (20%). */
.marquee-grid__cell:nth-child(1) { animation-delay: -7s; }
.marquee-grid__cell:nth-child(2) { animation-delay: -14s; }
.marquee-grid__cell:nth-child(3) { animation-delay: -6s; }
.marquee-grid__cell:nth-child(4) { animation-delay: -13s; }
.marquee-grid__cell:nth-child(5) { animation-delay: -5s; }
.marquee-grid__cell:nth-child(6) { animation-delay: -6s; }
.marquee-grid__cell:nth-child(7) { animation-delay: -7s; }
.marquee-grid__cell:nth-child(8) { animation-delay: -8s; }
.marquee-grid__cell:nth-child(9) { animation-delay: -9s; }
.marquee-grid__cell:nth-child(6) { animation-delay: -12s; }
.marquee-grid__cell:nth-child(7) { animation-delay: -4s; }
.marquee-grid__cell:nth-child(8) { animation-delay: -11s; }
.marquee-grid__cell:nth-child(9) { animation-delay: -3s; }
.marquee-grid__cell:nth-child(10) { animation-delay: -10s; }
.marquee-grid__cell:nth-child(11) { animation-delay: -11s; }
.marquee-grid__cell:nth-child(12) { animation-delay: -12s; }
.marquee-grid__cell:nth-child(13) { animation-delay: -13s; }
.marquee-grid__cell:nth-child(14) { animation-delay: -14s; }
.marquee-grid__cell:nth-child(15) { animation-delay: -15s; }
.marquee-grid__cell:nth-child(11) { animation-delay: -2s; }
.marquee-grid__cell:nth-child(12) { animation-delay: -9s; }
.marquee-grid__cell:nth-child(13) { animation-delay: -1s; }
.marquee-grid__cell:nth-child(14) { animation-delay: -8s; }
.marquee-grid__cell:nth-child(15) { animation-delay: 0s; }
@keyframes tagFlicker {
0% { opacity: 1; }
8% { opacity: 1; }
10% { opacity: 0.1; }
90% { opacity: 0.1; }
10% { opacity: 0.2; }
90% { opacity: 0.2; }
92% { opacity: 1; }
100% { opacity: 1; }
}