calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Adjust news grid and card click area

Browse source
This commit is contained in:
Calum Muir 2025-12-27 16:29:35 +00:00
parent 0c1463a413
commit d8b43501ec
2 changed files with 45 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
.gitignore vendored
View file

@ -4,3 +4,20 @@ dist
server/public server/public
vite.config.ts.* vite.config.ts.*
*.tar.gz *.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

25
client/src/pages/News.tsx
View file

@ -68,12 +68,15 @@ export const News = (): JSX.Element => {
<section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"> <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="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) => ( {newsArticles.map((item) => (
<article <article key={item.slug}>
key={item.slug} <a
className="bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 flex flex-col gap-4" 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}`}
> >
<div className="flex flex-col gap-4">
{item.image && ( {item.image && (
<div <div
className="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]" className="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
@ -86,22 +89,16 @@ export const News = (): JSX.Element => {
{formatNewsDate(item.date)} {formatNewsDate(item.date)}
</p> </p>
<div className="h-px w-full bg-black/20" /> <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]"> <h2 className="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
<a
className="hover:underline"
href={`/events/${item.slug}`}
>
{item.title} {item.title}
</a>
</h2> </h2>
<p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]"> <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
{item.summary} {item.summary}
</p> </p>
<a <span className="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
className="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline"
href={`/events/${item.slug}`}
>
Read more Read more
</span>
</div>
</a> </a>
</article> </article>
))} ))}