diff --git a/classes/index.html b/classes/index.html index e71f3a3..5e527b3 100644 --- a/classes/index.html +++ b/classes/index.html @@ -13,7 +13,8 @@ - + + @@ -378,7 +379,7 @@ - + \ No newline at end of file diff --git a/connect/index.html b/connect/index.html index a69a10d..63bc364 100644 --- a/connect/index.html +++ b/connect/index.html @@ -14,6 +14,7 @@ href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> + diff --git a/css/fireflies.css b/css/fireflies.css new file mode 100644 index 0000000..e2e6acf --- /dev/null +++ b/css/fireflies.css @@ -0,0 +1,362 @@ +.firefly { + position: fixed; + left: 50%; + top: 50%; + width: 0.4vw; + height: 0.4vw; + margin: -0.2vw 0 0 9.8vw; + animation: ease 200s alternate infinite; + pointer-events: none; + z-index: 0; +} + +.firefly::before, +.firefly::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + transform-origin: -10vw; +} + +.firefly::before { + background: black; + opacity: 0.4; + animation: drift ease alternate infinite; +} + +.firefly::after { + background: white; + opacity: 0; + box-shadow: 0 0 0vw 0vw #f5b800; + animation: drift ease alternate infinite, flash ease infinite; +} + +.firefly:nth-child(1) { animation-name: move1; } +.firefly:nth-child(1)::before { animation-duration: 15s; } +.firefly:nth-child(1)::after { animation-duration: 15s, 7421ms; animation-delay: 0ms, 3911ms; } + +.firefly:nth-child(2) { animation-name: move2; } +.firefly:nth-child(2)::before { animation-duration: 10s; } +.firefly:nth-child(2)::after { animation-duration: 10s, 9632ms; animation-delay: 0ms, 6894ms; } + +.firefly:nth-child(3) { animation-name: move3; } +.firefly:nth-child(3)::before { animation-duration: 17s; } +.firefly:nth-child(3)::after { animation-duration: 17s, 10384ms; animation-delay: 0ms, 5172ms; } + +.firefly:nth-child(4) { animation-name: move4; } +.firefly:nth-child(4)::before { animation-duration: 14s; } +.firefly:nth-child(4)::after { animation-duration: 14s, 6650ms; animation-delay: 0ms, 2460ms; } + +.firefly:nth-child(5) { animation-name: move5; } +.firefly:nth-child(5)::before { animation-duration: 18s; } +.firefly:nth-child(5)::after { animation-duration: 18s, 9291ms; animation-delay: 0ms, 7133ms; } + +.firefly:nth-child(6) { animation-name: move6; } +.firefly:nth-child(6)::before { animation-duration: 12s; } +.firefly:nth-child(6)::after { animation-duration: 12s, 8177ms; animation-delay: 0ms, 5726ms; } + +.firefly:nth-child(7) { animation-name: move7; } +.firefly:nth-child(7)::before { animation-duration: 11s; } +.firefly:nth-child(7)::after { animation-duration: 11s, 11123ms; animation-delay: 0ms, 4875ms; } + +.firefly:nth-child(8) { animation-name: move8; } +.firefly:nth-child(8)::before { animation-duration: 16s; } +.firefly:nth-child(8)::after { animation-duration: 16s, 7804ms; animation-delay: 0ms, 1569ms; } + +.firefly:nth-child(9) { animation-name: move9; } +.firefly:nth-child(9)::before { animation-duration: 9s; } +.firefly:nth-child(9)::after { animation-duration: 9s, 10591ms; animation-delay: 0ms, 8344ms; } + +.firefly:nth-child(10) { animation-name: move10; } +.firefly:nth-child(10)::before { animation-duration: 13s; } +.firefly:nth-child(10)::after { animation-duration: 13s, 7098ms; animation-delay: 0ms, 3250ms; } + +.firefly:nth-child(11) { animation-name: move11; } +.firefly:nth-child(11)::before { animation-duration: 17s; } +.firefly:nth-child(11)::after { animation-duration: 17s, 11444ms; animation-delay: 0ms, 2128ms; } + +.firefly:nth-child(12) { animation-name: move12; } +.firefly:nth-child(12)::before { animation-duration: 15s; } +.firefly:nth-child(12)::after { animation-duration: 15s, 8769ms; animation-delay: 0ms, 6512ms; } + +.firefly:nth-child(13) { animation-name: move13; } +.firefly:nth-child(13)::before { animation-duration: 10s; } +.firefly:nth-child(13)::after { animation-duration: 10s, 6115ms; animation-delay: 0ms, 1010ms; } + +.firefly:nth-child(14) { animation-name: move14; } +.firefly:nth-child(14)::before { animation-duration: 18s; } +.firefly:nth-child(14)::after { animation-duration: 18s, 10420ms; animation-delay: 0ms, 7548ms; } + +.firefly:nth-child(15) { animation-name: move15; } +.firefly:nth-child(15)::before { animation-duration: 12s; } +.firefly:nth-child(15)::after { animation-duration: 12s, 9712ms; animation-delay: 0ms, 4666ms; } + +@keyframes move1 { + 0% { transform: translateX(-28vw) translateY(17vh) scale(0.54); } + 5% { transform: translateX(31vw) translateY(-42vh) scale(0.91); } + 10% { transform: translateX(-9vw) translateY(44vh) scale(0.47); } + 15% { transform: translateX(12vw) translateY(-6vh) scale(0.72); } + 20% { transform: translateX(-44vw) translateY(-28vh) scale(0.85); } + 25% { transform: translateX(39vw) translateY(23vh) scale(0.39); } + 30% { transform: translateX(-16vw) translateY(7vh) scale(0.98); } + 35% { transform: translateX(45vw) translateY(-31vh) scale(0.63); } + 40% { transform: translateX(-36vw) translateY(33vh) scale(0.78); } + 45% { transform: translateX(6vw) translateY(-48vh) scale(0.51); } + 50% { transform: translateX(27vw) translateY(14vh) scale(0.94); } + 55% { transform: translateX(-21vw) translateY(-11vh) scale(0.66); } + 60% { transform: translateX(48vw) translateY(39vh) scale(0.43); } + 65% { transform: translateX(-3vw) translateY(-35vh) scale(0.88); } + 70% { transform: translateX(-49vw) translateY(4vh) scale(0.58); } + 75% { transform: translateX(18vw) translateY(48vh) scale(0.75); } + 80% { transform: translateX(-30vw) translateY(-44vh) scale(0.99); } + 85% { transform: translateX(36vw) translateY(-2vh) scale(0.62); } + 90% { transform: translateX(-13vw) translateY(29vh) scale(0.81); } + 95% { transform: translateX(4vw) translateY(-19vh) scale(0.46); } + 100% { transform: translateX(42vw) translateY(9vh) scale(0.69); } +} + +@keyframes move2 { + 0% { transform: translateX(14vw) translateY(-33vh) scale(0.82); } + 6.25% { transform: translateX(-41vw) translateY(28vh) scale(0.48); } + 12.5% { transform: translateX(36vw) translateY(41vh) scale(0.93); } + 18.75% { transform: translateX(-12vw) translateY(-7vh) scale(0.57); } + 25% { transform: translateX(5vw) translateY(49vh) scale(0.76); } + 31.25% { transform: translateX(-47vw) translateY(-21vh) scale(0.64); } + 37.5% { transform: translateX(23vw) translateY(-45vh) scale(0.99); } + 43.75% { transform: translateX(-2vw) translateY(18vh) scale(0.38); } + 50% { transform: translateX(44vw) translateY(-14vh) scale(0.86); } + 56.25% { transform: translateX(-29vw) translateY(3vh) scale(0.71); } + 62.5% { transform: translateX(11vw) translateY(36vh) scale(0.52); } + 68.75% { transform: translateX(-38vw) translateY(-49vh) scale(0.89); } + 75% { transform: translateX(49vw) translateY(10vh) scale(0.44); } + 81.25% { transform: translateX(-17vw) translateY(45vh) scale(0.96); } + 87.5% { transform: translateX(30vw) translateY(-27vh) scale(0.67); } + 93.75% { transform: translateX(-5vw) translateY(24vh) scale(0.79); } + 100% { transform: translateX(19vw) translateY(-39vh) scale(0.55); } +} + +@keyframes move3 { + 0% { transform: translateX(-22vw) translateY(38vh) scale(0.71); } + 7% { transform: translateX(41vw) translateY(-15vh) scale(0.44); } + 14% { transform: translateX(-8vw) translateY(-43vh) scale(0.89); } + 21% { transform: translateX(33vw) translateY(27vh) scale(0.56); } + 28% { transform: translateX(-47vw) translateY(11vh) scale(0.93); } + 35% { transform: translateX(19vw) translateY(-48vh) scale(0.38); } + 42% { transform: translateX(-34vw) translateY(35vh) scale(0.77); } + 49% { transform: translateX(7vw) translateY(-21vh) scale(0.62); } + 56% { transform: translateX(48vw) translateY(16vh) scale(0.85); } + 63% { transform: translateX(-15vw) translateY(-37vh) scale(0.49); } + 70% { transform: translateX(26vw) translateY(44vh) scale(0.96); } + 77% { transform: translateX(-43vw) translateY(-9vh) scale(0.68); } + 84% { transform: translateX(12vw) translateY(31vh) scale(0.81); } + 91% { transform: translateX(-29vw) translateY(-46vh) scale(0.53); } + 100% { transform: translateX(38vw) translateY(8vh) scale(0.74); } +} + +@keyframes move4 { + 0% { transform: translateX(17vw) translateY(-44vh) scale(0.83); } + 10% { transform: translateX(-39vw) translateY(21vh) scale(0.57); } + 20% { transform: translateX(46vw) translateY(-33vh) scale(0.42); } + 30% { transform: translateX(-11vw) translateY(49vh) scale(0.76); } + 40% { transform: translateX(28vw) translateY(-7vh) scale(0.91); } + 50% { transform: translateX(-47vw) translateY(36vh) scale(0.64); } + 60% { transform: translateX(8vw) translateY(-28vh) scale(0.48); } + 70% { transform: translateX(37vw) translateY(13vh) scale(0.87); } + 80% { transform: translateX(-24vw) translateY(-41vh) scale(0.73); } + 90% { transform: translateX(44vw) translateY(24vh) scale(0.55); } + 100% { transform: translateX(-16vw) translateY(-18vh) scale(0.98); } +} + +@keyframes move5 { + 0% { transform: translateX(-32vw) translateY(5vh) scale(0.66); } + 8% { transform: translateX(23vw) translateY(-38vh) scale(0.91); } + 16% { transform: translateX(-48vw) translateY(29vh) scale(0.47); } + 24% { transform: translateX(11vw) translateY(-13vh) scale(0.78); } + 32% { transform: translateX(40vw) translateY(42vh) scale(0.53); } + 40% { transform: translateX(-7vw) translateY(-47vh) scale(0.84); } + 48% { transform: translateX(35vw) translateY(18vh) scale(0.39); } + 56% { transform: translateX(-26vw) translateY(34vh) scale(0.95); } + 64% { transform: translateX(49vw) translateY(-22vh) scale(0.61); } + 72% { transform: translateX(-14vw) translateY(-6vh) scale(0.76); } + 80% { transform: translateX(6vw) translateY(47vh) scale(0.43); } + 88% { transform: translateX(-41vw) translateY(-31vh) scale(0.88); } + 100% { transform: translateX(29vw) translateY(11vh) scale(0.57); } +} + +@keyframes move6 { + 0% { transform: translateX(36vw) translateY(-46vh) scale(0.52); } + 9% { transform: translateX(-19vw) translateY(14vh) scale(0.87); } + 18% { transform: translateX(42vw) translateY(37vh) scale(0.69); } + 27% { transform: translateX(-44vw) translateY(-25vh) scale(0.94); } + 36% { transform: translateX(15vw) translateY(8vh) scale(0.41); } + 45% { transform: translateX(-3vw) translateY(-49vh) scale(0.73); } + 54% { transform: translateX(47vw) translateY(31vh) scale(0.58); } + 63% { transform: translateX(-38vw) translateY(-12vh) scale(0.82); } + 72% { transform: translateX(21vw) translateY(45vh) scale(0.46); } + 81% { transform: translateX(-29vw) translateY(-34vh) scale(0.97); } + 90% { transform: translateX(9vw) translateY(19vh) scale(0.64); } + 100% { transform: translateX(-46vw) translateY(42vh) scale(0.79); } +} + +@keyframes move7 { + 0% { transform: translateX(-11vw) translateY(-27vh) scale(0.88); } + 6% { transform: translateX(44vw) translateY(39vh) scale(0.53); } + 12% { transform: translateX(-33vw) translateY(-14vh) scale(0.74); } + 18% { transform: translateX(18vw) translateY(48vh) scale(0.41); } + 24% { transform: translateX(-48vw) translateY(-39vh) scale(0.86); } + 30% { transform: translateX(7vw) translateY(22vh) scale(0.63); } + 36% { transform: translateX(39vw) translateY(-41vh) scale(0.97); } + 42% { transform: translateX(-22vw) translateY(7vh) scale(0.48); } + 48% { transform: translateX(13vw) translateY(-19vh) scale(0.79); } + 54% { transform: translateX(-45vw) translateY(43vh) scale(0.55); } + 60% { transform: translateX(31vw) translateY(-5vh) scale(0.92); } + 66% { transform: translateX(-6vw) translateY(-44vh) scale(0.67); } + 72% { transform: translateX(48vw) translateY(28vh) scale(0.38); } + 78% { transform: translateX(-17vw) translateY(15vh) scale(0.81); } + 84% { transform: translateX(26vw) translateY(-32vh) scale(0.44); } + 90% { transform: translateX(-40vw) translateY(36vh) scale(0.71); } + 100% { transform: translateX(4vw) translateY(-10vh) scale(0.59); } +} + +@keyframes move8 { + 0% { transform: translateX(43vw) translateY(14vh) scale(0.77); } + 11% { transform: translateX(-24vw) translateY(-48vh) scale(0.43); } + 22% { transform: translateX(9vw) translateY(32vh) scale(0.89); } + 33% { transform: translateX(-46vw) translateY(-7vh) scale(0.61); } + 44% { transform: translateX(34vw) translateY(47vh) scale(0.96); } + 55% { transform: translateX(-13vw) translateY(-23vh) scale(0.52); } + 66% { transform: translateX(22vw) translateY(-38vh) scale(0.75); } + 77% { transform: translateX(-38vw) translateY(17vh) scale(0.48); } + 88% { transform: translateX(46vw) translateY(-11vh) scale(0.83); } + 100% { transform: translateX(-7vw) translateY(41vh) scale(0.67); } +} + +@keyframes move9 { + 0% { transform: translateX(-27vw) translateY(31vh) scale(0.58); } + 7.69% { transform: translateX(16vw) translateY(-45vh) scale(0.83); } + 15.38% { transform: translateX(-43vw) translateY(8vh) scale(0.47); } + 23.08% { transform: translateX(38vw) translateY(-19vh) scale(0.92); } + 30.77% { transform: translateX(-9vw) translateY(48vh) scale(0.61); } + 38.46% { transform: translateX(47vw) translateY(-36vh) scale(0.79); } + 46.15% { transform: translateX(-21vw) translateY(25vh) scale(0.44); } + 53.85% { transform: translateX(6vw) translateY(-12vh) scale(0.96); } + 61.54% { transform: translateX(-49vw) translateY(43vh) scale(0.53); } + 69.23% { transform: translateX(29vw) translateY(-7vh) scale(0.74); } + 76.92% { transform: translateX(-14vw) translateY(-41vh) scale(0.87); } + 84.62% { transform: translateX(41vw) translateY(33vh) scale(0.39); } + 92.31% { transform: translateX(-32vw) translateY(-26vh) scale(0.68); } + 100% { transform: translateX(11vw) translateY(17vh) scale(0.91); } +} + +@keyframes move10 { + 0% { transform: translateX(48vw) translateY(-39vh) scale(0.54); } + 12.5% { transform: translateX(-31vw) translateY(22vh) scale(0.79); } + 25% { transform: translateX(17vw) translateY(-14vh) scale(0.43); } + 37.5% { transform: translateX(-42vw) translateY(45vh) scale(0.86); } + 50% { transform: translateX(4vw) translateY(-28vh) scale(0.67); } + 62.5% { transform: translateX(36vw) translateY(11vh) scale(0.94); } + 75% { transform: translateX(-18vw) translateY(-49vh) scale(0.51); } + 87.5% { transform: translateX(45vw) translateY(37vh) scale(0.72); } + 100% { transform: translateX(-8vw) translateY(-6vh) scale(0.85); } +} + +@keyframes move11 { + 0% { transform: translateX(22vw) translateY(44vh) scale(0.69); } + 8.33% { transform: translateX(-46vw) translateY(-17vh) scale(0.84); } + 16.67% { transform: translateX(13vw) translateY(-42vh) scale(0.52); } + 25% { transform: translateX(-28vw) translateY(36vh) scale(0.93); } + 33.33% { transform: translateX(47vw) translateY(-8vh) scale(0.41); } + 41.67% { transform: translateX(-7vw) translateY(27vh) scale(0.76); } + 50% { transform: translateX(34vw) translateY(-46vh) scale(0.58); } + 58.33% { transform: translateX(-41vw) translateY(13vh) scale(0.87); } + 66.67% { transform: translateX(18vw) translateY(49vh) scale(0.46); } + 75% { transform: translateX(-3vw) translateY(-33vh) scale(0.73); } + 83.33% { transform: translateX(43vw) translateY(19vh) scale(0.61); } + 91.67% { transform: translateX(-36vw) translateY(-24vh) scale(0.95); } + 100% { transform: translateX(9vw) translateY(38vh) scale(0.77); } +} + +@keyframes move12 { + 0% { transform: translateX(-15vw) translateY(-8vh) scale(0.89); } + 9.09% { transform: translateX(39vw) translateY(46vh) scale(0.54); } + 18.18% { transform: translateX(-43vw) translateY(-31vh) scale(0.71); } + 27.27% { transform: translateX(24vw) translateY(15vh) scale(0.38); } + 36.36% { transform: translateX(-8vw) translateY(-43vh) scale(0.82); } + 45.45% { transform: translateX(46vw) translateY(28vh) scale(0.66); } + 54.55% { transform: translateX(-33vw) translateY(7vh) scale(0.91); } + 63.64% { transform: translateX(11vw) translateY(-37vh) scale(0.48); } + 72.73% { transform: translateX(-47vw) translateY(41vh) scale(0.74); } + 81.82% { transform: translateX(27vw) translateY(-14vh) scale(0.57); } + 90.91% { transform: translateX(-19vw) translateY(32vh) scale(0.43); } + 100% { transform: translateX(42vw) translateY(-26vh) scale(0.85); } +} + +@keyframes move13 { + 0% { transform: translateX(31vw) translateY(-21vh) scale(0.61); } + 5.56% { transform: translateX(-44vw) translateY(34vh) scale(0.78); } + 11.11% { transform: translateX(8vw) translateY(46vh) scale(0.43); } + 16.67% { transform: translateX(-26vw) translateY(-11vh) scale(0.92); } + 22.22% { transform: translateX(47vw) translateY(-47vh) scale(0.55); } + 27.78% { transform: translateX(-12vw) translateY(19vh) scale(0.84); } + 33.33% { transform: translateX(36vw) translateY(-3vh) scale(0.47); } + 38.89% { transform: translateX(-49vw) translateY(42vh) scale(0.73); } + 44.44% { transform: translateX(19vw) translateY(-28vh) scale(0.96); } + 50% { transform: translateX(-7vw) translateY(11vh) scale(0.58); } + 55.56% { transform: translateX(44vw) translateY(38vh) scale(0.41); } + 61.11% { transform: translateX(-37vw) translateY(-44vh) scale(0.79); } + 66.67% { transform: translateX(14vw) translateY(24vh) scale(0.64); } + 72.22% { transform: translateX(-31vw) translateY(-16vh) scale(0.87); } + 77.78% { transform: translateX(42vw) translateY(48vh) scale(0.52); } + 83.33% { transform: translateX(-22vw) translateY(-37vh) scale(0.95); } + 88.89% { transform: translateX(6vw) translateY(29vh) scale(0.68); } + 100% { transform: translateX(-48vw) translateY(7vh) scale(0.83); } +} + +@keyframes move14 { + 0% { transform: translateX(-34vw) translateY(-19vh) scale(0.76); } + 11.11% { transform: translateX(26vw) translateY(47vh) scale(0.49); } + 22.22% { transform: translateX(-11vw) translateY(-38vh) scale(0.91); } + 33.33% { transform: translateX(43vw) translateY(12vh) scale(0.62); } + 44.44% { transform: translateX(-48vw) translateY(29vh) scale(0.85); } + 55.56% { transform: translateX(17vw) translateY(-43vh) scale(0.53); } + 66.67% { transform: translateX(-6vw) translateY(36vh) scale(0.74); } + 77.78% { transform: translateX(38vw) translateY(-8vh) scale(0.41); } + 88.89% { transform: translateX(-23vw) translateY(21vh) scale(0.97); } + 100% { transform: translateX(9vw) translateY(-49vh) scale(0.66); } +} + +@keyframes move15 { + 0% { transform: translateX(45vw) translateY(38vh) scale(0.57); } + 7% { transform: translateX(-17vw) translateY(-46vh) scale(0.82); } + 14% { transform: translateX(32vw) translateY(13vh) scale(0.44); } + 21% { transform: translateX(-43vw) translateY(27vh) scale(0.93); } + 28% { transform: translateX(8vw) translateY(-34vh) scale(0.61); } + 35% { transform: translateX(-27vw) translateY(-8vh) scale(0.75); } + 42% { transform: translateX(48vw) translateY(42vh) scale(0.48); } + 49% { transform: translateX(-9vw) translateY(-22vh) scale(0.89); } + 56% { transform: translateX(23vw) translateY(-48vh) scale(0.54); } + 63% { transform: translateX(-38vw) translateY(16vh) scale(0.71); } + 70% { transform: translateX(14vw) translateY(39vh) scale(0.96); } + 77% { transform: translateX(-47vw) translateY(-13vh) scale(0.43); } + 84% { transform: translateX(37vw) translateY(-27vh) scale(0.78); } + 91% { transform: translateX(-21vw) translateY(44vh) scale(0.62); } + 100% { transform: translateX(5vw) translateY(-3vh) scale(0.85); } +} + +@keyframes drift { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes flash { + 0%, 30%, 100% { + opacity: 0; + box-shadow: 0 0 0vw 0vw #f5b800; + } + 5% { + opacity: 1; + box-shadow: 0 0 2vw 0.4vw #f5b800; + } +} diff --git a/festivals/index.html b/festivals/index.html index b4ef920..b4c9645 100644 --- a/festivals/index.html +++ b/festivals/index.html @@ -13,7 +13,8 @@ - + + @@ -247,7 +248,7 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index b8de5fa..668acd5 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,8 @@ - + + @@ -276,7 +277,7 @@ - + \ No newline at end of file diff --git a/js/main.js b/js/main.js index 87329a8..1ae8f0d 100644 --- a/js/main.js +++ b/js/main.js @@ -203,8 +203,21 @@ function lockPalmSizes() { }); } +// ---- Fireflies ---- +function initFireflies() { + const container = document.createElement('div'); + container.setAttribute('aria-hidden', 'true'); + for (let i = 0; i < 15; i++) { + const fly = document.createElement('div'); + fly.className = 'firefly'; + container.appendChild(fly); + } + document.body.prepend(container); +} + // ---- Init ---- document.addEventListener('DOMContentLoaded', () => { + initFireflies(); initNav(); renderScheduleList(); renderScheduleTeaser(); diff --git a/playlists/index.html b/playlists/index.html index 60c7f15..a80cd25 100644 --- a/playlists/index.html +++ b/playlists/index.html @@ -13,7 +13,8 @@ - + + @@ -585,7 +586,7 @@ - + + + \ No newline at end of file