style: make xiatian float

2 files changed, 16 insertions, 1 deletions

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{" "}