DeCentN2Madness
a163ff98c9
- relocate header, footer, nav, hero, and page-hero styles into their owning components - move blog index, blog post, team, video, insurance, CTA, and home-section styles out of the global sheet - keep focused on shared primitives such as buttons, cards, links, and list styling - preserve existing layout and responsive behavior while reducing global CSS scope
34 lines
1.8 KiB
Plaintext
34 lines
1.8 KiB
Plaintext
---
|
|
import BaseLayout from './BaseLayout.astro';
|
|
import BlogPostFooter from '../components/BlogPostFooter.astro';
|
|
import LikeViewCounter from '../components/LikeViewCounter.astro';
|
|
const { entry } = Astro.props;
|
|
---
|
|
<BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage} lang={entry.data.lang} type="article">
|
|
<article class="blog-post">
|
|
<header class="article-header container">
|
|
<h1>{entry.data.title}</h1>
|
|
<div class="article-byline">
|
|
<img src="/assets/images/rula-diab-avatar.jpg" alt="" />
|
|
<p><strong>Rula Diab, Clinical Director, M.Ed, BCBA, LBA</strong><br /><time datetime={entry.data.date.toISOString()}>{entry.data.date.toLocaleDateString(entry.data.lang, { day: '2-digit', month: 'long', year: 'numeric' })}</time></p>
|
|
</div>
|
|
{entry.data.featuredImage && <div class="article-featured"><img src={entry.data.featuredImage} alt={entry.data.alt || ''} /></div>}
|
|
</header>
|
|
<div class="prose blog-post-body container"><slot /></div>
|
|
<div class="container"><LikeViewCounter slug={entry.data.slug} /></div>
|
|
</article>
|
|
<BlogPostFooter entryId={entry.id} />
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.article-header { padding-block: 4.5rem 0; text-align: left; }
|
|
.article-header h1 { font-size: clamp(2.3rem, 5vw, 3rem); max-width: 900px; }
|
|
.article-byline { align-items: center; display: flex; font-size: .9rem; gap: 1rem; }
|
|
.article-byline img { margin-top: 0; height: 52px; width: 52px; }
|
|
.article-featured { height: 480px; margin: 3rem auto 0; max-width: 800px; overflow: hidden; }
|
|
.article-featured img { height: 100%; margin: 0; object-fit: cover; width: 100%; }
|
|
@media (max-width: 760px) {
|
|
.article-featured { height: auto; }
|
|
}
|
|
</style>
|