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
vite.config.ts.*
*.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

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

@ -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>
))}