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

Stack article cards to single column on mobile on Events pages

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-04-30 20:12:49 +00:00
parent e6bc071c80
commit fab0f7fb3d
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/pages/events/index.astro
View file

@ -81,6 +81,9 @@ const typeColors: Record<string, string> = {
.post-card-img { transition: transform 0.5s ease; } .post-card-img { transition: transform 0.5s ease; }
.post-card:hover .post-card-img { transform: scale(1.05); } .post-card:hover .post-card-img { transform: scale(1.05); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
.event-row { transition: background 0.2s ease; } .event-row { transition: background 0.2s ease; }
.event-row:hover { background: rgba(125,163,113,0.09) !important; } .event-row:hover { background: rgba(125,163,113,0.09) !important; }
@ -248,7 +251,7 @@ const typeColors: Record<string, string> = {
)} )}
<!-- Article grid --> <!-- Article grid -->
<div id="post-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;"> <div id="post-grid" class="post-grid">
{rest.map((post) => ( {rest.map((post) => (
<a <a
class="post-card" class="post-card"

5
src/pages/events/page/[page].astro
View file

@ -56,6 +56,9 @@ function formatDate(date: string) {
.post-card:hover .post-title { text-decoration: underline; } .post-card:hover .post-title { text-decoration: underline; }
.post-card-img { transition: transform 0.5s ease; } .post-card-img { transition: transform 0.5s ease; }
.post-card:hover .post-card-img { transform: scale(1.05); } .post-card:hover .post-card-img { transform: scale(1.05); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px; }
@media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
</style> </style>
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10"> <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
@ -100,7 +103,7 @@ function formatDate(date: string) {
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);"> <section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
<div style="max-width: 1200px; margin: 0 auto;"> <div style="max-width: 1200px; margin: 0 auto;">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px;"> <div class="post-grid">
{pagedArticles.map((post) => ( {pagedArticles.map((post) => (
<a <a
class="post-card" class="post-card"