diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Favicons.astro | 15 | ||||
| -rw-r--r-- | src/components/Header.astro | 31 |
2 files changed, 27 insertions, 19 deletions
diff --git a/src/components/Favicons.astro b/src/components/Favicons.astro index 5816730..f7b15ed 100644 --- a/src/components/Favicons.astro +++ b/src/components/Favicons.astro @@ -1,6 +1,15 @@ -<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /> -<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> +<link + rel="icon" + type="image/png" + href="/static/favicon-96x96.png" + sizes="96x96" +/> +<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" /> <link rel="shortcut icon" href="/favicon.ico" /> -<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> +<link + rel="apple-touch-icon" + sizes="180x180" + href="/static/apple-touch-icon.png" +/> <meta name="apple-mobile-web-app-title" content="FOSS CET" /> <link rel="manifest" href="/site.webmanifest" /> diff --git a/src/components/Header.astro b/src/components/Header.astro index 7f5dd31..5024060 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -18,7 +18,7 @@ import logo from '../../public/static/logo.svg' src={logo} alt="Logo" id="navbar-logo" - class="size-8 transition-all duration-300 md:size-12 md:saturate-100" + class="size-8 opacity-0 transition-all duration-300 md:size-12 md:saturate-100" /> <span class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-3xl" @@ -46,32 +46,28 @@ import logo from '../../public/static/logo.svg' </div> <script> - const target = document.querySelector('#scroll-trigger') - const nav = document.querySelector('#navbar') as HTMLDivElement - const logo = document.querySelector('#navbar-logo') as HTMLImageElement + const initNavbarObserver = () => { + const target = document.querySelector('#scroll-trigger') + const nav = document.querySelector('#navbar') as HTMLDivElement + const logo = document.querySelector('#navbar-logo') as HTMLImageElement + + if (!target) { + console.error( + "Observer Error: Target element '#scroll-trigger' not found in DOM.", + ) + return + } - if (!target) { - console.error( - "Observer Error: Target element '#scroll-trigger' not found in DOM.", - ) - } else { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - console.log('Intersection Ratio:', entry.intersectionRatio) - console.log('Is Intersecting?:', entry.isIntersecting) - if (!entry.isIntersecting) { - console.log('Trigger hit the top (Exited viewport)') document.querySelector('#main-nav')?.classList.add('is-at-top') logo.classList.remove('opacity-0', 'scale-0', 'w-0') - nav.style.marginLeft = '0' nav.style.justifyContent = 'space-between' } else { - console.log('Trigger is back in view') document.querySelector('#main-nav')?.classList.remove('is-at-top') logo.classList.add('opacity-0', 'scale-0', 'w-0') - nav.style.marginLeft = '-1rem' nav.style.justifyContent = 'center' } }) @@ -81,4 +77,7 @@ import logo from '../../public/static/logo.svg' observer.observe(target) } + + window.addEventListener('load', initNavbarObserver) + document.addEventListener('astro:page-load', initNavbarObserver) </script> |