From 3957d5fbce27b0050a52daff906f9071fc8aed4c Mon Sep 17 00:00:00 2001
From: Satria <90962949+SX-9@users.noreply.github.com>
Date: Sun, 3 Nov 2024 16:13:17 +0700
Subject: [PATCH] extra animation

---
 src/app.css             |  2 +-
 src/routes/+page.svelte | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index f72aa0f..c6e9319 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-* { @apply transition-all duration-500 ease-in-out; }
+* { @apply transition-all duration-300 ease-in-out; }
 body { @apply bg-slate-950 text-gray-400 max-w-3xl mx-auto my-8 px-4; }
 h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
 h2 { @apply text-2xl md:text-3xl font-bold my-4; }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index db53cb1..1300983 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,11 +10,11 @@
 
 <header>
     <div class="group border-2 border-slate-700 hover:border-slate-500 rounded-xl w-full h-32 overflow-hidden flex justify-center items-center shadow-lg">
-        <span class="text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-slate-500 group-hover:text-slate-700">
-            {randomStr(25)}<br>{randomStr(25)}
-            {randomStr(20-data.name.length/2)}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-2 no-underline text-slate-300 group-hover:text-slate-100">{data.name.toUpperCase()}</a>{randomStr(20-data.name.length/2)}
-            {randomStr(25)}<br>{randomStr(25)}
-        </span>
+        <div class="text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-slate-500 group-hover:text-slate-700">
+            <span>{randomStr(30)}<br>{randomStr(40)}</span>
+            <span class="group-hover:py-4 block">{randomStr(20-data.name.length/2)}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-slate-300 group-hover:text-slate-100">{data.name.toUpperCase()}</a>{randomStr(20-data.name.length/2)}</span>
+            <span>{randomStr(40)}<br>{randomStr(30)}</span>
+        </div>
     </div>
     <nav class="flex justify-center gap-4 text-lg max-w-full overflow-y-auto text-nowrap">
         <a href={'https://github.com/'+data.github} target="_blank">github</a>