From 58baa78e7a72c7ec269731a81bc5f6aba155cd65 Mon Sep 17 00:00:00 2001
From: Beau Findlay <beau@unhurd.co.uk>
Date: Fri, 26 Apr 2024 16:09:51 +0100
Subject: [PATCH] Add fade in animation

---
 src/Client/src/index.css        | 17 ++++++++++++++++-
 src/Client/src/pages/Layout.tsx |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Client/src/index.css b/src/Client/src/index.css
index bd6213e..7c8243d 100644
--- a/src/Client/src/index.css
+++ b/src/Client/src/index.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.fade-in {
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/Client/src/pages/Layout.tsx b/src/Client/src/pages/Layout.tsx
index 3de92b2..d7b33e5 100644
--- a/src/Client/src/pages/Layout.tsx
+++ b/src/Client/src/pages/Layout.tsx
@@ -5,7 +5,7 @@ import Footer from "../components/Footer";
 export default function Layout() {
   return (
     <div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
-      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in ">
+      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
         <NavBar />
         <div className="flex-1 py-8">
           <Outlet />