From 98f4ee1dc2f505b0caa9c08b05935b78cc206007 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Thu, 28 Dec 2023 13:06:11 +0100
Subject: Fine tuned view transition
---
.../src/components/base/navbar/NavbarElement.astro | 2 +-
apps/website/src/layouts/Layout.astro | 26 +++++++++++++++++++---
apps/website/src/pages/contact.astro | 13 +++++++++++
apps/website/src/styles/global.css | 21 +++++++++++++++++
4 files changed, 58 insertions(+), 4 deletions(-)
create mode 100644 apps/website/src/pages/contact.astro
(limited to 'apps')
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 {
? (
{element.text && element.text}
- {element.logo && }
+ {element.logo && }
{element.dropdown && }
)
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,
+};
---
@@ -36,10 +56,10 @@ const {
-
-
+
+
-
+
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';
+
+---
+
+
+
+
+
+
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;
--
cgit