110 lines
3.1 KiB
Plaintext
110 lines
3.1 KiB
Plaintext
---
|
|
// Background.astro - Dot pattern and ambient glow background with smooth theme transitions
|
|
---
|
|
|
|
<div class="theme-transition-all fixed inset-0 -z-10 overflow-hidden">
|
|
<!-- Dot pattern background -->
|
|
<div
|
|
class="bg-grid-pattern theme-transition-bg absolute inset-0 bg-[center_top_-1px] [mask-image:radial-gradient(white,transparent_85%)]"
|
|
>
|
|
</div>
|
|
|
|
<!-- Ambient glow effects -->
|
|
<div
|
|
class="animate-glow theme-transition-bg absolute left-1/4 top-1/4 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-400/20 opacity-50 blur-3xl dark:bg-zinc-500/20"
|
|
>
|
|
</div>
|
|
<div
|
|
class="animate-glow animation-delay-1000 theme-transition-bg absolute bottom-1/3 right-1/4 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-full bg-zinc-300/20 opacity-40 blur-3xl dark:bg-zinc-600/20"
|
|
>
|
|
</div>
|
|
|
|
<!-- Theme transition overlay -->
|
|
<div
|
|
id="theme-transition-overlay"
|
|
class="pointer-events-none absolute inset-0 bg-white opacity-0 dark:bg-zinc-900"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Theme transition script
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.querySelector('[data-theme-toggle]');
|
|
const overlay = document.getElementById('theme-transition-overlay');
|
|
|
|
if (themeToggle && overlay) {
|
|
themeToggle.addEventListener('click', () => {
|
|
// Add transitioning class to optimize performance
|
|
document.documentElement.classList.add('theme-transitioning');
|
|
|
|
// Fade in overlay
|
|
overlay.style.opacity = '0.15';
|
|
overlay.style.transition = 'opacity 0.3s ease';
|
|
|
|
setTimeout(() => {
|
|
// Fade out overlay
|
|
overlay.style.opacity = '0';
|
|
|
|
// Remove transitioning class after animation completes
|
|
setTimeout(() => {
|
|
document.documentElement.classList.remove('theme-transitioning');
|
|
}, 700);
|
|
}, 300);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Grid pattern for dots */
|
|
.bg-grid-pattern {
|
|
background-size: 24px 24px;
|
|
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
|
|
transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
|
|
}
|
|
|
|
/* Dark mode version */
|
|
:global(.dark) .bg-grid-pattern {
|
|
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
|
}
|
|
|
|
/* Ambient glow animations */
|
|
.animate-glow {
|
|
animation: glow 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
transition:
|
|
background-color 0.7s cubic-bezier(0.65, 0, 0.35, 1),
|
|
opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
|
|
}
|
|
|
|
.animation-delay-1000 {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
25% {
|
|
opacity: 0.5;
|
|
transform: translate(5%, 5%) scale(1.1);
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
transform: translate(0, 10%) scale(0.95);
|
|
}
|
|
75% {
|
|
opacity: 0.5;
|
|
transform: translate(-5%, 5%) scale(1.05);
|
|
}
|
|
}
|
|
|
|
/* Theme transition overlay */
|
|
#theme-transition-overlay {
|
|
transition: opacity 0.3s ease;
|
|
z-index: 10;
|
|
}
|
|
</style>
|