From e0c3d688aeceb7918ea665e853634d5e9f232263 Mon Sep 17 00:00:00 2001
From: Rico <rvzelst7@gmail.com>
Date: Wed, 7 Jan 2026 19:50:26 +0100
Subject: [PATCH] style: refine article card layout and colors

---
 app/Http/Controllers/PostsController.php      |  2 +-
 .../components/posts/listposts.blade.php      | 30 ++++++++-----------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/app/Http/Controllers/PostsController.php b/app/Http/Controllers/PostsController.php
index 76e3328..3efd004 100644
--- a/app/Http/Controllers/PostsController.php
+++ b/app/Http/Controllers/PostsController.php
@@ -10,7 +10,7 @@ class PostsController extends Controller
 {
     public function index()
     {
-        $posts = Sheets::all()->filter(fn ($post) => ! $post->hidden)->sortByDesc('date');
+        $posts = Sheets::all()->filter(fn($post) => ! $post->hidden)->sortByDesc('date');
         $paginatedPosts = Paginate::collection($posts, 6);
 
         return view('posts.index', [
diff --git a/resources/views/components/posts/listposts.blade.php b/resources/views/components/posts/listposts.blade.php
index 6293ac5..889bc6e 100644
--- a/resources/views/components/posts/listposts.blade.php
+++ b/resources/views/components/posts/listposts.blade.php
@@ -1,45 +1,39 @@
 @use('Carbon\Carbon')
 
-<div class="container flex flex-col items-center justify-center p-4 mx-auto mt-3">
-    <div class="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-2 items-stretch">
+<div class="container flex flex-col justify-center items-center p-4 mx-auto mt-3">
+    <div class="grid grid-cols-1 gap-8 items-stretch w-full md:grid-cols-2 lg:grid-cols-2">
         @foreach ($posts as $post)
             @if ($post->hidden)
                 @continue
             @endif
-            <article class="flex flex-col h-full overflow-hidden transition-colors duration-300 border shadow-md group bg-stone-800/40 rounded-2xl border-stone-800 hover:border-orange-500/30">
-                <!-- Image Wrapper -->
+            <article class="flex overflow-hidden flex-col h-full rounded-2xl border shadow-md transition-colors duration-300 group bg-stone-800/40 border-stone-800 hover:border-orange-500/30">
                 <a href="{{ route('posts.show', $post->slug) }}" class="relative w-full overflow-hidden aspect-[1.91/1] block">
-                    <img 
-                        src="{{ $post->thumbnail }}" 
+                    <img
+                        src="{{ $post->thumbnail }}"
                         alt="{{ $post->title }} Thumbnail"
                         class="object-cover w-full h-full"
                     >
                 </a>
-                
-                <!-- Content -->
+
                 <div class="flex flex-col flex-1 p-5">
-                    <!-- Date -->
                     <div class="mb-2 text-xs font-medium tracking-wider text-orange-400 uppercase">
                         <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
                     </div>
 
-                    <!-- Title -->
-                    <a href="{{ route('posts.show', $post->slug) }}" class="block group-hover:text-orange-400 transition-colors duration-200">
-                        <h2 class="mb-3 text-xl font-bold leading-tight text-gray-100 line-clamp-2" itemprop="name">
+                    <a href="{{ route('posts.show', $post->slug) }}" class="block transition-colors duration-200 group-hover:text-orange-400">
+                        <h2 class="mb-3 text-xl font-bold leading-tight text-stone-100 line-clamp-2" itemprop="name">
                             {{ $post->title }}
                         </h2>
                     </a>
 
-                    <!-- Description -->
-                    <p class="mb-4 text-sm leading-relaxed text-gray-400 line-clamp-3" itemprop="headline">
+                    <p class="my-auto mb-4 text-sm leading-relaxed text-stone-400 line-clamp-3" itemprop="headline">
                         {{ $post->description }}
                     </p>
-                    
-                    <!-- Footer / Action -->
-                    <div class="mt-auto pt-4 border-t border-stone-700/50 flex items-center justify-between">
+
+                    <div class="flex justify-between items-center pt-4 mt-auto border-t border-stone-700/50">
                          <a href="{{ route('posts.show', $post->slug) }}" itemprop="url" class="inline-flex items-center text-sm font-medium text-orange-400 transition-colors group-hover:text-orange-300">
                             Read Article
-                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                             </svg>
                         </a>