diff options
| -rw-r--r-- | site/src/index.css | 13 | ||||
| -rw-r--r-- | site/src/pages/Homepage.tsx | 4 |
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{" "} |