diff options
| author | LynithDev <61880709+LynithDev@users.noreply.github.com> | 2023-12-28 13:06:11 +0100 |
|---|---|---|
| committer | LynithDev <61880709+LynithDev@users.noreply.github.com> | 2023-12-28 13:06:11 +0100 |
| commit | 98f4ee1dc2f505b0caa9c08b05935b78cc206007 (patch) | |
| tree | 3278d3efd2308044e9a4ef5113d11c98d2d99056 | |
| parent | 092ad3a326145c17eb0a6967e284cc03d57c1851 (diff) | |
| download | Nexus-98f4ee1dc2f505b0caa9c08b05935b78cc206007.tar.gz Nexus-98f4ee1dc2f505b0caa9c08b05935b78cc206007.tar.bz2 Nexus-98f4ee1dc2f505b0caa9c08b05935b78cc206007.zip | |
Fine tuned view transition
| -rw-r--r-- | apps/website/src/components/base/navbar/NavbarElement.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/layouts/Layout.astro | 26 | ||||
| -rw-r--r-- | apps/website/src/pages/contact.astro | 13 | ||||
| -rw-r--r-- | apps/website/src/styles/global.css | 21 |
4 files changed, 58 insertions, 4 deletions
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro index 0fe544b..9aec193 100644 --- a/apps/website/src/components/base/navbar/NavbarElement.astro +++ b/apps/website/src/components/base/navbar/NavbarElement.astro @@ -28,7 +28,7 @@ function isCurrentPage(url: string): boolean { ? ( <a href={element.path} class={`p-2 flex flex-row justify-center items-center hover:text-blue-500 ${isCurrentPage(element.path) ? 'text-blue-400' : 'text-gray-700'}`}> {element.text && element.text} - {element.logo && <Logo class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>} + {element.logo && <Logo transition:persist class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>} {element.dropdown && <Icon icon="chevron-down"/>} </a> ) diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index d5b61cd..32cebed 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -16,6 +16,26 @@ const { description = 'Official website for Polyfrost.', favicon = Favicon, } = Astro.props; + +const fadeAnimation = { + old: { + name: 'fadeOut', + duration: '0.1s', + easing: 'linear', + fillMode: 'forwards', + }, + new: { + name: 'fadeIn', + duration: '0.1s', + easing: 'linear', + fillMode: 'backwards', + }, +}; + +const fade = { + forwards: fadeAnimation, + backwards: fadeAnimation, +}; --- <!doctype html> @@ -36,10 +56,10 @@ const { <ViewTransitions /> </head> - <body class="bg-gray-50 overflow-x-hidden"> - <Navbar/> + <body class="bg-gray-50 overflow-x-hidden" transition:animate={fade}> + <Navbar transition:animate="none" transition:persist /> - <main class="min-h-screen h-auto" transition:animate="fade"> + <main class="min-h-screen h-auto"> <slot/> </main> diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro new file mode 100644 index 0000000..0dc70bd --- /dev/null +++ b/apps/website/src/pages/contact.astro @@ -0,0 +1,13 @@ +--- +import Section from '@components/base/Section.astro'; +import Layout from '@layouts/Layout.astro'; + +--- + +<Layout> + + <Section> + + </Section> + +</Layout> diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css index f98d574..a240f83 100644 --- a/apps/website/src/styles/global.css +++ b/apps/website/src/styles/global.css @@ -32,6 +32,27 @@ } } +/* Transition */ +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + /* Codeblocks */ .astro-code { padding: 10px; |