diff options
| author | Yuval Adam <_@yuv.al> | 2025-06-14 23:41:42 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-06-14 23:41:42 +0200 |
| commit | abee8fa7e82e66765ca8b513f9dc1a7bac814779 (patch) | |
| tree | 6739853a863b26d0a5896796efeb43e27b219586 | |
| parent | bae61910dd9aee1ab75bd9f7ca3bc20e749342ba (diff) | |
Update design
| -rw-r--r-- | src/pages/index.astro | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro index a320a82..fca327e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -74,14 +74,15 @@ const url = "https://namehack.club"; <h2 class="text-3xl font-semibold mb-8 text-gray-900 flex items-center gap-3"> <span class="text-2xl">💎</span> <span>Members</span> + <span class="text-lg text-gray-500 font-light">({members.length})</span> </h2> - <ul class="space-y-6"> + <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> {members.map((name) => ( - <li class="border-l-4 border-gray-100 pl-6 py-2 hover:border-pink-200 transition-colors duration-200"> - <div class="text-2xl lg:text-3xl font-medium"> - <NameLink name={name} size="large" /> + <li class="border border-gray-100 rounded-lg p-4 hover:bg-gray-50 hover:border-gray-200 transition-all duration-200"> + <div class="text-lg font-medium mb-1"> + <NameLink name={name} size="medium" /> </div> - <div class="text-gray-600 text-lg mt-2 font-light">{name.data.title}</div> + <div class="text-gray-600 text-sm font-light">{name.data.title}</div> </li> ))} </ul> @@ -91,10 +92,11 @@ const url = "https://namehack.club"; <h2 class="text-3xl font-semibold mb-8 text-gray-900 flex items-center gap-3"> <span class="text-2xl">⭐</span> <span>Candidates</span> + <span class="text-lg text-gray-500 font-light">({candidates.length})</span> </h2> - <ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> + <ul class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2"> {candidates.map((name) => ( - <li class="p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"> + <li class="p-1 rounded hover:bg-gray-50 transition-colors duration-200 text-center text-xs"> <NameLink name={name} size="small" /> </li> ))} @@ -102,6 +104,7 @@ const url = "https://namehack.club"; </section> </main> + <hr class="mt-16 mb-8 border-gray-200"> <footer class="text-center text-gray-600 leading-relaxed pb-8"> <p class="text-lg font-light"> |