From 1fb36159c1eefbd4acd4fa60a42a988e4b9187ac Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 19 Apr 2025 22:28:22 -0700
Subject: style: make xiatian float

---
 site/src/index.css          | 13 +++++++++++++
 site/src/pages/Homepage.tsx |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

(limited to 'site')

diff --git a/site/src/index.css b/site/src/index.css
index bb66fd9..2084e7e 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -1,2 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
 @import "tailwindcss";
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.floating {
+  animation: float 3s ease-in-out infinite;
+}
diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx
index d7919b4..6db2748 100644
--- a/site/src/pages/Homepage.tsx
+++ b/site/src/pages/Homepage.tsx
@@ -65,7 +65,9 @@ export default function Home() {
                     ) : (
                         <div className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}>
                             <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1>
-                            <img src="/xiatian.webp" className="w-48 mx-auto mb-2 object-contain rounded-2xl animate-floating" />
+                            <div className="floating">
+                              <img src="/xiatian.webp" className="w-48 mx-auto mb-2 object-contain rounded-2xl" />
+                            </div>
                             <p>News and Information for various arcade games is aggregated here!</p>
                             <p className="mt-2">
                                 Please see the{" "}
-- 
cgit v1.2.3