alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: shorten transition time

Browse Source
This commit is contained in:
Alex Lebens
2026-03-03 14:00:40 -06:00
parent f984a1f759
commit 3eae720221
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/buttons/ThemeToggleButton.astro
View File

@@ -64,7 +64,7 @@
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50'; overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
overlay.style.opacity = '0'; overlay.style.opacity = '0';
overlay.style.transition = 'opacity 0.3s ease-out'; overlay.style.transition = 'opacity 0.15s ease-out';
document.body.appendChild(overlay); document.body.appendChild(overlay);
} }
@@ -130,7 +130,7 @@
overlay.style.opacity = '0'; overlay.style.opacity = '0';
} }
document.documentElement.classList.remove('theme-switching'); document.documentElement.classList.remove('theme-switching');
}, 300); }, 150);
}, 50); }, 50);
}, },
{ passive: false } { passive: false }

4
src/components/images/ImageTheme.astro
View File

@@ -8,7 +8,7 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
<Image <Image
src={srcLight} src={srcLight}
alt={alt} alt={alt}
class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]} class:list={['col-start-1 row-start-1 transition-all duration-300 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]}
width={width} width={width}
height={height} height={height}
inferSize={true} inferSize={true}
@@ -17,7 +17,7 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
<Image <Image
src={srcDark} src={srcDark}
alt={alt} alt={alt}
class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]} class:list={['col-start-1 row-start-1 transition-all duration-300 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]}
width={width} width={width}
height={height} height={height}
inferSize={true} inferSize={true}