From d848d0980097127f5b50589bb294979c80adf200 Mon Sep 17 00:00:00 2001
From: Tobias Feigel <info@feigel.it>
Date: Sat, 6 Sep 2025 11:51:23 +0200
Subject: [PATCH] Restructures news snippet for improved layout

Refactors the news snippet to enhance its visual appearance and layout.

Changes include:
- Switching to a flexbox-based layout for improved responsiveness.
- Adding an aspect ratio to the images.
- Displaying author information, including avatar and role.
- Adding a button to clear the tag filter.
---
 site/snippets/home-news.php | 85 ++++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/site/snippets/home-news.php b/site/snippets/home-news.php
index 66256e4..862a55f 100644
--- a/site/snippets/home-news.php
+++ b/site/snippets/home-news.php
@@ -1,48 +1,57 @@
 <div class="py-16">
     <h2>Neuigkeiten aus dem Verein</h2>
-    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-        <?php foreach($news as $post): ?>
-        <article class="flex flex-col items-start justify-between">
-            <div class="relative w-full">
-                <img src="<?= $post->image()->url() ?>" alt="" class="w-full h-64 rounded-xl object-cover" />
-                <div class="absolute inset-0 rounded-2xl inset-ring inset-ring-gray-900/10"></div>
-            </div>
-            <div class="flex max-w-xl grow flex-col justify-between">
-                <div class="mt-8 flex items-center gap-x-4 text-xs">
+    <?php foreach($news as $post): ?>
+    <article class="relative flex flex-col gap-8 lg:flex-row py-12">
+        <div class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0">
+            <img src="<?= $post->image()->url() ?>" alt="" class="absolute inset-0 size-full rounded-xl object-cover" />
+            <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
+        </div>
+        <div>
+            <div class="flex items-center gap-x-4 text-m justify-between">
+                <div>
                     <time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
+                </div>
+                <div>
                     <?php foreach($post->tags()->split() as $tag): ?>
                         <a href="<?= page('news')->url(['params' => ['tag' => $tag]]) ?>" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
                     <?php endforeach; ?>
                 </div>
-                <div class="group relative grow">
-                    <h2>
-                        <a href="<?= $post->url() ?>">
-                            <span class="absolute inset-0"></span>
-                            <?= $post->headline() ?>
-                        </a>
-                    </h2>
-                    <p><?= $post->summary() ?></p>
-                </div>
-                <?php if ($user = $post->author()->toUser()): ?>
-                    <div class="mt-6 flex border-t border-gray-900/5 pt-6">
-                        <div class="relative flex items-center gap-x-4">
-                            <img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
-                            <div class="text-sm/6">
-                                <p>
-                                    <a href="#">
-                                        <span class="absolute inset-0"></span>
-                                        <div class="text-xl">
-                                            <?= $user->username() ?>
-                                        </div>
-                                    </a>
-                                </p>
-                                <p class="text-sm"><?= $user->role()->title() ?></p>
-                            </div>
-                        </div>
-                    </div>
-                <?php endif; ?>
             </div>
-        </article>
-        <?php endforeach; ?>
+            <div class="group relative">
+                <h2>
+                    <a href="<?= $post->url() ?>" class="relative">
+                        <span class="absolute inset-0"></span>
+                        <?= $post->headline() ?>
+                    </a>
+                </h2>
+                <p><?= $post->summary() ?></p>
+            </div>
+            <?php if ($user = $post->author()->toUser()): ?>
+            <div class="mt-6 flex border-t border-gray-900/5 pt-6">
+                <div class="relative flex items-center gap-x-4">
+                    <img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
+                    <div class="text-sm/6">
+                        <p>
+                            <span class="absolute inset-0"></span>
+                            <div class="text-xl">
+                                <?= $user->username() ?>
+                            </div>
+                        </p>
+                        <p class="text-sm"><?= $user->role()->title() ?></p>
+                    </div>
+                </div>
+            </div>
+            <?php endif ?>
+        </div>
+    </article>
+    <?php endforeach ?>
+    
+    <?php if(param('tag')): ?>
+    <div class="my-8">
+        <a href="<?= $page->url() ?>" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded">
+            Alle Beiträge anzeigen
+        </a>
     </div>
+    <?php endif ?>
+
 </div>
\ No newline at end of file