DeCentN2Madness
4675809911
- add the two live intro paragraphs between the hero and article grid - keep the library listing cards in the live two-column layout - restore the 4:3 cropped article thumbnails and card spacing via library-scoped selectors - avoid leaking the card-grid overrides into unrelated pages - add likes/views from api to library article cards
41 lines
2.5 KiB
Plaintext
41 lines
2.5 KiB
Plaintext
---
|
|
import LikeViewCounter from './LikeViewCounter.astro';
|
|
const { post, prefix = '' } = Astro.props;
|
|
const href = `${prefix}/library/${post.data.slug}`.replace('//', '/');
|
|
const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد' }[post.data.lang] || 'Read More';
|
|
---
|
|
<article class="card blog-card">
|
|
{post.data.featuredImage && <a href={href}><img src={post.data.featuredImage} alt={post.data.alt || ''} loading="lazy" /></a>}
|
|
<div class="card-body">
|
|
<div class="blog-card-meta"><img src="/assets/images/rula-diab-avatar.jpg" alt="" /><p>Rula Diab, Clinical Director, M.Ed, BCBA, LBA<br /><time datetime={post.data.date.toISOString()}>{post.data.date.toLocaleDateString(post.data.lang, { day: 'numeric', month: 'long', year: 'numeric' })}</time></p></div>
|
|
<h3><a href={href}>{post.data.title}</a></h3>
|
|
<p>{post.data.description}</p>
|
|
<div class="blog-card-footer" style="align-items:center;display:flex;justify-content:space-between;gap:var(--space-lg);margin-top:auto;">
|
|
<a class="text-link" href={href}>{readMore}</a>
|
|
<LikeViewCounter slug={post.data.slug} />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<style>
|
|
.blog-card-meta { align-items: center; display: flex; font-size: .78rem; gap: .75rem; }
|
|
.blog-card-meta img { aspect-ratio: 1; border-radius: 50%; height: 42px; width: 42px; }
|
|
.blog-card { background: white; border: 0; border-radius: 4px; box-shadow: rgba(54, 48, 48, 0.28) 0 0 12px 0; display: flex; margin-bottom: 40px; overflow: hidden; }
|
|
.blog-card > a { flex: 0 0 232px; display: block; margin: .75rem; }
|
|
.blog-card > a img { aspect-ratio: auto; display: block; height: 100%; object-fit: cover; width: 100%; }
|
|
.blog-card .card-body { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 20px; }
|
|
.blog-card .card-body h3 { font-family: var(--font-body); }
|
|
.blog-card-footer { align-items: center; display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: auto; }
|
|
:global(.blog-card .like-view-counter) { border-top: 0; justify-content: space-between; margin-block: 0; padding-top: 0; width: auto; }
|
|
.blog-card h3 { font-size: 1.35rem; margin-bottom: 1rem; }
|
|
.blog-card p { margin-bottom: 1rem; }
|
|
.blog-card .text-link { margin: 0; }
|
|
|
|
@media (max-width: 760px) {
|
|
.blog-card { flex-direction: column; }
|
|
.blog-card > a { flex-basis: auto; }
|
|
.blog-card > a img { height: auto; aspect-ratio: 4 / 3; }
|
|
.blog-card-footer { align-items: flex-start; flex-direction: column; }
|
|
}
|
|
</style>
|