From d8b43501ec82c9135951652bae93607ba403e2bb Mon Sep 17 00:00:00 2001
From: Calum Muir <calumamuir@outlook.com>
Date: Sat, 27 Dec 2025 16:29:35 +0000
Subject: [PATCH] Adjust news grid and card click area

---
 .gitignore                | 19 ++++++++++++-
 client/src/pages/News.tsx | 57 +++++++++++++++++++--------------------
 2 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/.gitignore b/.gitignore
index f9ba7f8..439b523 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,21 @@ dist
 .DS_Store
 server/public
 vite.config.ts.*
-*.tar.gz
\ No newline at end of file
+*.tar.gz
+.local/
+222957077_6028824210491349_4146132303877993139_n-1920w.webp
+223152689_6028821187158318_7901235528269673744_n-1920w-1.webp
+Breagh-bc8e70e8-2880w.webp
+Button.png
+connolly-73f3e69f-2880w-2.webp
+dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4
+Harley-6ece9eca-2880w.webp
+news.webp
+puzzle-5de6e325-2880w.webp
+Samantha-and-Connolly.jpg
+Samantha-sStory-2880w.webp
+small-mono.png
+Star-Participants-Samantha-s-story.pdf
+Suede-2880w.webp
+Wispa-2880w-906x1536.avif
+Wispa-2880w.webp
diff --git a/client/src/pages/News.tsx b/client/src/pages/News.tsx
index 7df8a3b..59aee68 100644
--- a/client/src/pages/News.tsx
+++ b/client/src/pages/News.tsx
@@ -68,40 +68,37 @@ export const News = (): JSX.Element => {
 
                 <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
-                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
+                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                             {newsArticles.map((item) => (
-                                <article
-                                    key={item.slug}
-                                    className="bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 flex flex-col gap-4"
-                                >
-                                    {item.image && (
-                                        <div
-                                            className="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
-                                            style={{
-                                                backgroundImage: `url(${item.image})`,
-                                            }}
-                                        />
-                                    )}
-                                    <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
-                                        {formatNewsDate(item.date)}
-                                    </p>
-                                    <div className="h-px w-full bg-black/20" />
-                                    <h2 className="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2]">
-                                        <a
-                                            className="hover:underline"
-                                            href={`/events/${item.slug}`}
-                                        >
-                                            {item.title}
-                                        </a>
-                                    </h2>
-                                    <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
-                                        {item.summary}
-                                    </p>
+                                <article key={item.slug}>
                                     <a
-                                        className="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline"
+                                        className="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
                                         href={`/events/${item.slug}`}
+                                        aria-label={`Read ${item.title}`}
                                     >
-                                        Read more
+                                        <div className="flex flex-col gap-4">
+                                            {item.image && (
+                                                <div
+                                                    className="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
+                                                    style={{
+                                                        backgroundImage: `url(${item.image})`,
+                                                    }}
+                                                />
+                                            )}
+                                            <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
+                                                {formatNewsDate(item.date)}
+                                            </p>
+                                            <div className="h-px w-full bg-black/20" />
+                                            <h2 className="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
+                                                {item.title}
+                                            </h2>
+                                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
+                                                {item.summary}
+                                            </p>
+                                            <span className="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
+                                                Read more
+                                            </span>
+                                        </div>
                                     </a>
                                 </article>
                             ))}