Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 DeCentN2Madness
|
4a6b8a20e5
|
||
|
DeCentN2Madness
|
965c090782
|
||
|
DeCentN2Madness
|
a163ff98c9
|
@@ -1,4 +1,5 @@
|
||||
---
|
||||
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';
|
||||
@@ -9,6 +10,31 @@ const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد'
|
||||
<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>
|
||||
|
||||
@@ -4,3 +4,8 @@
|
||||
<a class="button button-light" href="/client-consultation">Schedule a Free Consultation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.cta-band { background: var(--color-primary); color: white; padding-block: var(--space-xl); }
|
||||
.cta-band h2, .cta-band .eyebrow { color: white; margin: 0; }
|
||||
</style>
|
||||
|
||||
@@ -63,3 +63,28 @@ const labels = lang === 'es'
|
||||
<p><a href="/privacy-policy">Privacy Policy</a> | <a href="/faqs">FAQ</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.site-footer { background: var(--color-primary-dark); color: white; padding-block: var(--space-xl) var(--space-md); }
|
||||
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr 1fr 1.5fr; }
|
||||
.site-footer h2, .site-footer a { color: white; text-decoration: none; }
|
||||
.site-footer h2 { font-size: 1.25rem; letter-spacing: .3px; margin-bottom: 1.2rem; }
|
||||
.site-footer a:hover { color: var(--color-accent); }
|
||||
.site-footer ul { list-style: none; padding: 0; }
|
||||
.site-footer li { line-height: 2.6; margin-bottom: 0; }
|
||||
.site-footer p { line-height: 2.6; }
|
||||
.footer-contact { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; margin-top: 2rem; }
|
||||
.footer-contact-item { align-items: flex-start; display: flex; gap: .6rem; line-height: 1.5; }
|
||||
.footer-contact-item img { flex-shrink: 0; }
|
||||
.footer-contact-item address { font-style: normal; }
|
||||
.social-links { display: flex; gap: .85rem; margin-left: 1.6rem; margin-top: .25rem; }
|
||||
.social-links a { align-items: center; color: white; display: flex; opacity: .85; }
|
||||
.social-links a:hover { color: var(--color-accent); opacity: 1; }
|
||||
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 20%); display: flex; justify-content: space-between; margin-top: var(--space-lg); padding-top: var(--space-md); }
|
||||
@media (max-width: 950px) {
|
||||
.footer-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.footer-bottom { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,3 +24,20 @@ const utility = lang === 'es'
|
||||
<a class="button button-small" href="/tour">Tour AIA</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.utility-bar { background: var(--color-primary); color: white; font-size: .85rem; }
|
||||
.utility-inner { align-items: center; display: flex; gap: var(--space-md); justify-content: flex-end; min-height: 38px; }
|
||||
.utility-bar a { color: white; text-decoration: none; }
|
||||
.site-header { background: white; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
|
||||
.header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
|
||||
.brand img { width: 150px; }
|
||||
@media (max-width: 950px) {
|
||||
.header-inner > .button { display: none; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.utility-inner { justify-content: center; }
|
||||
.header-inner { min-height: 88px; }
|
||||
.header-inner .lang-switcher { margin-left: auto; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,3 +13,12 @@ const { title, eyebrow, description, image, alt = '' } = Astro.props;
|
||||
{image && <img src={image} alt={alt} loading="eager" />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero { background: var(--color-tint); overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
|
||||
.hero-grid { align-items: center; display: grid; gap: var(--space-xl); grid-template-columns: 1.05fr .95fr; }
|
||||
.hero img { max-height: 430px; object-fit: contain; width: 100%; }
|
||||
@media (max-width: 950px) {
|
||||
.hero-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,8 +38,9 @@ function fromHomeContent(home: HomePageContent): HomeSection[] {
|
||||
const sections: HomeSection[] = entry.data.home
|
||||
? fromHomeContent(entry.data.home)
|
||||
: ((entry.data.sections ?? []) as HomeSection[]);
|
||||
|
||||
function renderSection(section: HomeSection) {
|
||||
---
|
||||
<BaseLayout {title} {description} {canonical} {lang}>
|
||||
{sections.map((section) => {
|
||||
switch (section.type) {
|
||||
case 'hero':
|
||||
return <HomeHero section={section} />;
|
||||
@@ -61,11 +62,8 @@ function renderSection(section: HomeSection) {
|
||||
return <HomeDirector section={section} />;
|
||||
case 'testimonials':
|
||||
return <HomeTestimonials section={section} />;
|
||||
}
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
---
|
||||
<BaseLayout {title} {description} {canonical} {lang}>
|
||||
{sections.map(renderSection)}
|
||||
}
|
||||
})}
|
||||
</BaseLayout>
|
||||
|
||||
@@ -4,3 +4,10 @@ const logos = ['aetna.png', 'bluecrossblueshield-logo-1.webp', 'logo-ahcccs.webp
|
||||
<section class="insurance-strip" aria-labelledby="insurance-title">
|
||||
<div class="container"><h2 id="insurance-title">Insurance partners</h2><div class="logo-row">{logos.map((logo) => <img src={`/assets/images/${logo}`} alt="" loading="lazy" />)}</div></div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.insurance-strip { background: white; border-block: 1px solid var(--color-border); padding-block: var(--space-lg); text-align: center; }
|
||||
.insurance-strip h2 { font-size: 1.4rem; }
|
||||
.logo-row { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
|
||||
.logo-row img { filter: grayscale(1); max-height: 55px; max-width: 130px; }
|
||||
</style>
|
||||
|
||||
@@ -51,3 +51,15 @@ const activeShort = langMeta[activeCode]?.short ?? 'EN';
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.lang-switcher { position: relative; }
|
||||
.lang-switcher__trigger { align-items: center; color: var(--color-primary); cursor: pointer; display: flex; font-size: .85rem; font-weight: 700; gap: .35rem; }
|
||||
.lang-switcher__trigger svg { flex-shrink: 0; }
|
||||
.lang-switcher__menu { background: white; box-shadow: var(--shadow-md); display: none; left: 50%; list-style: none; margin: 0; min-width: 110px; padding: .5rem 0 .4rem; position: absolute; top: 100%; transform: translateX(-50%); z-index: 10; }
|
||||
.lang-switcher__menu a { color: rgb(83 83 91); display: block; font-size: .85rem; padding: .4rem .9rem; text-decoration: none; white-space: nowrap; }
|
||||
.lang-switcher__menu a:hover { background: var(--color-primary); color: white; }
|
||||
.lang-switcher__menu a[aria-current="page"] { color: var(--color-accent); font-weight: 700; }
|
||||
.lang-switcher:hover .lang-switcher__menu,
|
||||
.lang-switcher:focus-within .lang-switcher__menu { display: block; }
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
---
|
||||
const { slug } = Astro.props;
|
||||
---
|
||||
<div class="like-view-counter likes-views" data-counter>
|
||||
<div class="like-view-counter" data-counter>
|
||||
<span aria-label="Article views"><span class="view-count" data-views>0</span> views</span>
|
||||
<span class="like-group">
|
||||
<span class="like-count" data-likes>—</span>
|
||||
<button class="like-button" type="button" data-like data-slug={slug} aria-label="Like this article" aria-pressed="false">
|
||||
<span aria-hidden="true">♡</span> <span class="like-count" data-likes>—</span>
|
||||
<svg aria-hidden="true" viewBox="0 0 12 10" width="20" height="20" focusable="false" class="like-icon">
|
||||
<path d="m1 4.4c-1-4 2.5-5 4.5-2.5l.5 .6l.5-.6c2-2.5 6-1.5 4.5 2.5q-1 3-5 5q-4-2-5-5z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<span aria-label="Article views">Views: <span class="view-count" data-views>—</span></span>
|
||||
</span>
|
||||
</div>
|
||||
<script>
|
||||
const apiBase = import.meta.env.PUBLIC_AIA_API_BASE || 'https://api.azinstitute4autism.com';
|
||||
@@ -44,6 +49,14 @@ const { slug } = Astro.props;
|
||||
const views = counter.querySelector<HTMLElement>('[data-views]');
|
||||
if (!button || !slug) return;
|
||||
|
||||
const isLocalhost = ['localhost', '127.0.0.1', '::1'].includes(window.location.hostname);
|
||||
if (isLocalhost) {
|
||||
counter.dataset.unavailable = 'true';
|
||||
if (likes) likes.textContent = '0';
|
||||
if (views) views.textContent = '0';
|
||||
return;
|
||||
}
|
||||
|
||||
const cookieName = `liked_${slug}`;
|
||||
const renderLiked = (liked: boolean) => {
|
||||
button.classList.toggle('liked', liked);
|
||||
@@ -66,7 +79,7 @@ const { slug } = Astro.props;
|
||||
} catch {
|
||||
counter.dataset.unavailable = 'true';
|
||||
if (likes) likes.textContent = '0';
|
||||
if (views) views.textContent = '—';
|
||||
if (views) views.textContent = '0';
|
||||
}
|
||||
|
||||
button.addEventListener('click', async () => {
|
||||
@@ -96,3 +109,14 @@ const { slug } = Astro.props;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); font-size: .75rem; margin-block: var(--space-xl); padding-top: var(--space-md); }
|
||||
.like-view-counter { font-size: .8rem; }
|
||||
.like-group { align-items: center; display: inline-flex; gap: .35rem; }
|
||||
.like-view-counter button { align-items: center; background: white; border: none; color: inherit; display: inline-flex; gap: 0; padding: 0; }
|
||||
.like-view-counter .like-count { color: var(--color-text); min-width: 1ch; }
|
||||
.like-view-counter .like-icon { fill: none; flex: 0 0 auto; stroke: #d92d20; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
|
||||
.like-view-counter button.liked .like-icon { fill: #d92d20; stroke: #d92d20; }
|
||||
.like-view-counter button:disabled { cursor: wait; opacity: .65; }
|
||||
</style>
|
||||
|
||||
@@ -2,3 +2,7 @@
|
||||
const { title = 'Scottsdale', address = '8901 E Raintree Dr Ste 160, Scottsdale, AZ 85260' } = Astro.props;
|
||||
---
|
||||
<article class="card location-card"><h3>{title}</h3><p>{address}</p><a class="text-link" href={`https://maps.google.com/?q=${encodeURIComponent(address)}`}>Get directions</a></article>
|
||||
|
||||
<style>
|
||||
.location-card { padding: var(--space-lg); }
|
||||
</style>
|
||||
|
||||
@@ -22,3 +22,19 @@ const aboutLinks = lang === 'es'
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.main-nav { margin-inline: auto; }
|
||||
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
|
||||
.main-nav li { position: relative; }
|
||||
.main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
|
||||
.main-nav a:hover { color: var(--color-accent-strong); }
|
||||
.main-nav .submenu { background: white; box-shadow: var(--shadow-md); display: none; gap: 0; left: -1rem; min-width: 180px; padding: .75rem 0; position: absolute; top: 100%; }
|
||||
.main-nav .submenu a { display: block; padding: .45rem 1rem; }
|
||||
.main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
|
||||
@media (max-width: 950px) {
|
||||
.main-nav { display: none; }
|
||||
:global(.mobile-nav) .main-nav { display: block; }
|
||||
:global(.mobile-nav) .main-nav ul { align-items: flex-start; flex-direction: column; padding: var(--space-md); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,3 +6,10 @@ const { lang = 'en' } = Astro.props;
|
||||
<summary>Menu</summary>
|
||||
<MainNav lang={lang} />
|
||||
</details>
|
||||
|
||||
<style>
|
||||
.mobile-nav { display: none; }
|
||||
@media (max-width: 950px) {
|
||||
.mobile-nav { display: block; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,3 +16,18 @@ const { title, image, eyebrow, constrain = false } = Astro.props;
|
||||
}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
|
||||
.page-hero h1 { margin: 0; }
|
||||
.page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
|
||||
.page-hero--image > .container { padding-block: 10rem; }
|
||||
.page-hero--image h1 { max-width: 600px; }
|
||||
.page-hero__copy { max-width: 600px; }
|
||||
.page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
|
||||
@media (max-width: 760px) {
|
||||
.page-hero--image > .container { padding-block: 6.25rem; }
|
||||
.page-hero--image { text-align: center; }
|
||||
.page-hero--image h1, .page-hero__copy { margin-inline: auto; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,3 +65,21 @@ const groups = [
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.team-intro { padding-block: 4rem; text-align: center; }
|
||||
.team-intro .script-label { font-size: 1.8rem; }
|
||||
.team-group { padding-block: 2rem 4rem; text-align: center; }
|
||||
.team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
|
||||
.team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
|
||||
.team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
|
||||
.team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
|
||||
.team-member p { margin: 0; }
|
||||
.team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
|
||||
@media (max-width: 950px) {
|
||||
.team-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (min-width: 761px) and (max-width: 1050px) {
|
||||
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,3 +49,18 @@ const { image, alt, videoUrl, videoTitle } = Astro.props;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; }
|
||||
.video-card img { width: 100%; }
|
||||
.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; }
|
||||
.video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; }
|
||||
.video-card::before { animation-delay: .5s; }
|
||||
.video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; }
|
||||
.video-dialog::backdrop { background: rgba(0, 0, 0, .85); }
|
||||
.video-dialog-inner { position: relative; }
|
||||
.video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; }
|
||||
.video-dialog-frame iframe { border: none; height: 100%; width: 100%; }
|
||||
.video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; }
|
||||
@keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } }
|
||||
</style>
|
||||
|
||||
@@ -17,6 +17,17 @@ const { section } = Astro.props;
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.process-section h2 { text-align: center; }
|
||||
.process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
|
||||
.process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
|
||||
.process-grid div:hover { transform: scale(1.05); z-index: 1; }
|
||||
.process-grid img { margin: 0 auto 1rem; width: 42%; }
|
||||
@media (max-width: 760px) {
|
||||
.process-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function equalizeProcessCards() {
|
||||
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
|
||||
|
||||
@@ -50,3 +50,14 @@ const { section } = Astro.props;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.testimonial-section h2 { text-align: center; }
|
||||
.testimonial-section blockquote { margin: 0 auto; max-width: 720px; padding: 0 2rem; text-align: center; }
|
||||
.testimonial-author { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
|
||||
.testimonial-swiper { --swiper-pagination-bullet-horizontal-gap: 1vw; padding-bottom: 3rem !important; }
|
||||
.testimonial-swiper .swiper-pagination-bullet { background-color: var(--color-accent); opacity: 1; }
|
||||
.testimonial-swiper .swiper-pagination-bullet-active { background-color: var(--color-accent-strong); }
|
||||
.testimonial-swiper .swiper-button-next, .testimonial-swiper .swiper-button-prev { color: var(--color-accent); }
|
||||
.testimonial-swiper .swiper-button-next:hover, .testimonial-swiper .swiper-button-prev:hover { color: var(--color-accent-strong); }
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,35 @@
|
||||
---
|
||||
import BaseLayout from './BaseLayout.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
const { title, description, lang = 'en' } = Astro.props;
|
||||
const { title, description, intro = [], lang = 'en' } = Astro.props;
|
||||
const languagePrefix = lang === 'en' ? '' : `/${lang}`;
|
||||
const canonical = `https://www.azinstitute4autism.com${languagePrefix}/library`;
|
||||
---
|
||||
<BaseLayout title={title} description={description} canonical={canonical} lang={lang}>
|
||||
<PageHero title={title} image="/assets/images/hero-library-index.webp" eyebrow="Welcome to" constrain />
|
||||
<section class="library-intro"><div class="container"><h2>Library</h2><p>{description}</p></div></section>
|
||||
<section class="library-intro">
|
||||
<div class="container">
|
||||
<h2>Library</h2>
|
||||
{intro.length ? intro.map((paragraph) => <p>{paragraph}</p>) : <p>{description}</p>}
|
||||
</div>
|
||||
</section>
|
||||
<div class="container section library-layout"><slot /></div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
:global(.library-intro) { background: var(--color-primary); color: white; padding-block: 3rem; }
|
||||
:global(.library-intro h2) { color: white; }
|
||||
:global(.library-layout) { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
|
||||
:global(.library-sidebar) { position: sticky; top: 1rem; }
|
||||
:global(.library-sidebar label) { display: block; font-weight: 700; margin-bottom: .4rem; }
|
||||
:global(.library-sidebar input) { border: 1px solid var(--color-border); border-radius: 4px; font: inherit; padding: .7rem; width: 100%; }
|
||||
:global(.library-sidebar h2) { font-size: 1.1rem; margin-top: 2rem; }
|
||||
:global(.library-sidebar ul) { list-style: none; padding: 0; }
|
||||
:global(.library-sidebar li) { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
|
||||
:global(.library-sidebar a) { color: var(--color-primary); font-size: .9rem; }
|
||||
:global(.blog-list) { display: block; }
|
||||
@media (max-width: 760px) {
|
||||
:global(.library-layout) { grid-template-columns: 1fr; }
|
||||
:global(.library-sidebar) { position: static; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,3 +19,15 @@ const { entry } = Astro.props;
|
||||
</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>
|
||||
|
||||
@@ -5,7 +5,14 @@ import BlogCard from '../../components/BlogCard.astro';
|
||||
const posts = (await getCollection('blog', ({ data }) => data.lang === 'en' && !data.draft)).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
||||
const popular = posts.slice(0, 5);
|
||||
---
|
||||
<BlogIndexLayout title="The Library at AZ Institute for Autism" description="Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, community events, success stories, and expert guidance.">
|
||||
<BlogIndexLayout
|
||||
title="The Library at AZ Institute for Autism"
|
||||
description="Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, community events, success stories, and expert guidance."
|
||||
intro={[
|
||||
"Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, including teaching self-advocacy, proactive and reactive strategies, and innovative intervention techniques.",
|
||||
"We also highlight community events, success stories, and expert guidance to foster understanding and empowerment. Whether you're a parent, caregiver, educator, or advocate, our goal is to provide meaningful content that helps children with autism reach their highest potential in a compassionate and supportive environment. Stay connected with us as we continue to share knowledge and celebrate progress!",
|
||||
]}
|
||||
>
|
||||
<div class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
|
||||
<aside class="library-sidebar">
|
||||
<label for="library-search">Search</label>
|
||||
|
||||
@@ -1,149 +1,14 @@
|
||||
.utility-bar { background: var(--color-primary); color: white; font-size: .85rem; }
|
||||
.utility-inner { align-items: center; display: flex; gap: var(--space-md); justify-content: flex-end; min-height: 38px; }
|
||||
.utility-bar a { color: white; text-decoration: none; }
|
||||
.lang-switcher { position: relative; }
|
||||
.lang-switcher__trigger { align-items: center; color: var(--color-primary); cursor: pointer; display: flex; font-size: .85rem; font-weight: 700; gap: .35rem; }
|
||||
.lang-switcher__trigger svg { flex-shrink: 0; }
|
||||
.lang-switcher__menu { background: white; box-shadow: var(--shadow-md); display: none; left: 50%; list-style: none; margin: 0; min-width: 110px; padding: .5rem 0 .4rem; position: absolute; top: 100%; transform: translateX(-50%); z-index: 10; }
|
||||
.lang-switcher__menu a { color: rgb(83 83 91); display: block; font-size: .85rem; padding: .4rem .9rem; text-decoration: none; white-space: nowrap; }
|
||||
.lang-switcher__menu a:hover { background: var(--color-primary); color: white; }
|
||||
.lang-switcher__menu a[aria-current="page"] { color: var(--color-accent); font-weight: 700; }
|
||||
.lang-switcher:hover .lang-switcher__menu,
|
||||
.lang-switcher:focus-within .lang-switcher__menu { display: block; }
|
||||
.site-header { background: white; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
|
||||
.header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
|
||||
.brand img { width: 150px; }
|
||||
.main-nav { margin-inline: auto; }
|
||||
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
|
||||
.main-nav li { position: relative; }
|
||||
.main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
|
||||
.main-nav a:hover { color: var(--color-accent-strong); }
|
||||
.main-nav .submenu { background: white; box-shadow: var(--shadow-md); display: none; gap: 0; left: -1rem; min-width: 180px; padding: .75rem 0; position: absolute; top: 100%; }
|
||||
.main-nav .submenu a { display: block; padding: .45rem 1rem; }
|
||||
.main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
|
||||
.mobile-nav { display: none; }
|
||||
.button { background: var(--color-accent); border: 2px solid var(--color-accent); border-radius: 4px; color: var(--color-primary); display: inline-block; padding: .65rem 1.2rem; text-decoration: none; transition: .3s linear all; }
|
||||
.button:hover { background: transparent; border-color: var(--color-accent-strong); color: var(--color-primary); }
|
||||
.button-small { font-size: .9rem; }
|
||||
.button-light { background: white; color: var(--color-primary-dark); }
|
||||
.hero { background: var(--color-tint); overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
|
||||
.hero-grid { align-items: center; display: grid; gap: var(--space-xl); grid-template-columns: 1.05fr .95fr; }
|
||||
.hero img { max-height: 430px; object-fit: contain; width: 100%; }
|
||||
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
|
||||
.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
|
||||
.card-body, .location-card { padding: var(--space-lg); }
|
||||
.card-body { padding: var(--space-lg); }
|
||||
.card h2, .card h3 { margin-top: 0; }
|
||||
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
|
||||
.text-link { font-weight: 700; }
|
||||
.insurance-strip { background: white; border-block: 1px solid var(--color-border); padding-block: var(--space-lg); text-align: center; }
|
||||
.insurance-strip h2 { font-size: 1.4rem; }
|
||||
.logo-row { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
|
||||
.logo-row img { filter: grayscale(1); max-height: 55px; max-width: 130px; }
|
||||
.cta-band { background: var(--color-primary); color: white; padding-block: var(--space-xl); }
|
||||
.cta-band h2, .cta-band .eyebrow { color: white; margin: 0; }
|
||||
.site-footer { background: var(--color-primary-dark); color: white; padding-block: var(--space-xl) var(--space-md); }
|
||||
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr 1fr 1.5fr; }
|
||||
.site-footer h2, .site-footer a { color: white; text-decoration: none; }
|
||||
.site-footer h2 { font-size: 1.25rem; letter-spacing: .3px; margin-bottom: 1.2rem; }
|
||||
.site-footer a:hover { color: var(--color-accent); }
|
||||
.site-footer ul { list-style: none; padding: 0; }
|
||||
.site-footer li { line-height: 2.6; margin-bottom: 0; }
|
||||
.site-footer p { line-height: 2.6; }
|
||||
.footer-contact { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; margin-top: 2rem; }
|
||||
.footer-contact-item { align-items: flex-start; display: flex; gap: .6rem; line-height: 1.5; }
|
||||
.footer-contact-item img { flex-shrink: 0; }
|
||||
.footer-contact-item address { font-style: normal; }
|
||||
.social-links { display: flex; gap: .85rem; margin-left: 1.6rem; margin-top: .25rem; }
|
||||
.social-links a { align-items: center; color: white; display: flex; opacity: .85; }
|
||||
.social-links a:hover { color: var(--color-accent); opacity: 1; }
|
||||
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 20%); display: flex; justify-content: space-between; margin-top: var(--space-lg); padding-top: var(--space-md); }
|
||||
.article-header { padding-block: var(--space-xl) var(--space-lg); text-align: center; }
|
||||
.article-header h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); }
|
||||
.article-header img { border-radius: var(--radius-lg); margin-top: var(--space-lg); width: 100%; }
|
||||
.like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); margin-block: var(--space-xl); padding-top: var(--space-md); }
|
||||
.like-view-counter button { background: white; border: 1px solid var(--color-border); border-radius: 999px; padding: .6rem 1rem; }
|
||||
.like-view-counter button.liked { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }
|
||||
.like-view-counter button:disabled { cursor: wait; opacity: .65; }
|
||||
.page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
|
||||
.page-hero h1 { margin: 0; }
|
||||
.page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
|
||||
.page-hero--image > .container { padding-block: 10rem; }
|
||||
.page-hero--image h1 { max-width: 600px; }
|
||||
.page-hero__copy { max-width: 600px; }
|
||||
.page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
|
||||
.library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
|
||||
.library-intro h2 { color: white; }
|
||||
.library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
|
||||
.library-sidebar { position: sticky; top: 1rem; }
|
||||
.library-sidebar label { display: block; font-weight: 700; margin-bottom: .4rem; }
|
||||
.library-sidebar input { border: 1px solid var(--color-border); border-radius: 4px; font: inherit; padding: .7rem; width: 100%; }
|
||||
.library-sidebar h2 { font-size: 1.1rem; margin-top: 2rem; }
|
||||
.library-sidebar ul { list-style: none; padding: 0; }
|
||||
.library-sidebar li { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
|
||||
.library-sidebar a { color: var(--color-primary); font-size: .9rem; }
|
||||
.blog-list { display: grid; gap: 2rem; }
|
||||
.blog-list .blog-card { box-shadow: none; display: grid; grid-template-columns: 240px 1fr; }
|
||||
.blog-list .blog-card > a img { aspect-ratio: 4 / 3; height: 100%; }
|
||||
.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 h3 { font-size: 1.35rem; }
|
||||
.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%; }
|
||||
.team-intro { padding-block: 4rem; text-align: center; }
|
||||
.team-intro .script-label { font-size: 1.8rem; }
|
||||
.team-group { padding-block: 2rem 4rem; text-align: center; }
|
||||
.team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
|
||||
.team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
|
||||
.team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
|
||||
.team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
|
||||
.team-member p { margin: 0; }
|
||||
.team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
|
||||
@media (max-width: 950px) { .main-nav, .header-inner > .button { display: none; } .mobile-nav { display: block; } .mobile-nav .main-nav { display: block; } .mobile-nav .main-nav ul { align-items: flex-start; flex-direction: column; padding: var(--space-md); } .hero-grid, .footer-grid { grid-template-columns: 1fr; } }
|
||||
.source-list { margin-block: 0 1.5rem; padding-inline-start: 2.5rem; }
|
||||
.source-list li { line-height: 1.625; margin: 0; padding-inline-start: .15rem; }
|
||||
.source-list li::marker { color: var(--color-accent); }
|
||||
.source-list li > p { margin-block: 0; }
|
||||
.video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; }
|
||||
.video-card img { width: 100%; }
|
||||
.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; }
|
||||
.video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; }
|
||||
.video-card::before { animation-delay: .5s; }
|
||||
@keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } }
|
||||
.video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; }
|
||||
.video-dialog::backdrop { background: rgba(0, 0, 0, .85); }
|
||||
.video-dialog-inner { position: relative; }
|
||||
.video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; }
|
||||
.video-dialog-frame iframe { border: none; height: 100%; width: 100%; }
|
||||
.video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; }
|
||||
.process-section h2, .testimonial-section h2 { text-align: center; }
|
||||
.process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
|
||||
.process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
|
||||
.process-grid div:hover { transform: scale(1.05); z-index: 1; }
|
||||
.process-grid img { margin: 0 auto 1rem; width: 42%; }
|
||||
.testimonial-section blockquote { margin: 0 auto; max-width: 720px; padding: 0 2rem; text-align: center; }
|
||||
.testimonial-author { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
|
||||
.testimonial-swiper { --swiper-pagination-bullet-horizontal-gap: 1vw; padding-bottom: 3rem !important; }
|
||||
.testimonial-swiper .swiper-pagination-bullet { background-color: var(--color-accent); opacity: 1; }
|
||||
.testimonial-swiper .swiper-pagination-bullet-active { background-color: var(--color-accent-strong); }
|
||||
.testimonial-swiper .swiper-button-next, .testimonial-swiper .swiper-button-prev { color: var(--color-accent); }
|
||||
.testimonial-swiper .swiper-button-next:hover, .testimonial-swiper .swiper-button-prev:hover { color: var(--color-accent-strong); }
|
||||
@media (max-width: 760px) {
|
||||
.utility-inner { justify-content: center; }
|
||||
.header-inner { min-height: 88px; }
|
||||
.header-inner .lang-switcher { margin-left: auto; }
|
||||
.process-grid { grid-template-columns: 1fr 1fr; }
|
||||
.footer-bottom { align-items: flex-start; flex-direction: column; }
|
||||
.library-layout { grid-template-columns: 1fr; }
|
||||
.library-sidebar { position: static; }
|
||||
.blog-list .blog-card { grid-template-columns: 1fr; }
|
||||
.article-featured { height: auto; }
|
||||
.team-grid { grid-template-columns: 1fr; }
|
||||
.page-hero--image > .container { padding-block: 6.25rem; }
|
||||
.page-hero--image { text-align: center; }
|
||||
.page-hero--image h1, .page-hero__copy { margin-inline: auto; }
|
||||
}
|
||||
@media (min-width: 761px) and (max-width: 1050px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
|
||||
Reference in New Issue
Block a user