DeCentN2Madness/aia-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(director): align layout and typography with live site

Browse Source 
Narrows the photo column to match the live site's ~1:3.6 split,
stacks photo above name as an h3, italicises the quote, and styles
the name line with body font at caption scale.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Hales
2026-06-09 15:14:22 -07:00
parent 1bc0224f76
commit 5f4fbd5e05
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/src/components/home/HomeDirector.astro
+4 -4
View File
@@ -3,15 +3,15 @@ import type { DirectorSection } from '../../types/home-sections';
interface Props { section: DirectorSection } interface Props { section: DirectorSection }
const { section } = Astro.props; const { section } = Astro.props;
--- ---
<section class="section family-section"> <section class="section director-section">
<div class="container feature-grid"> <div class="container feature-grid director-layout">
<div class="director-card"> <div class="director-card">
<img src={`/assets/images/${section.photo}`} alt={section.photoAlt} /> <img src={`/assets/images/${section.photo}`} alt={section.photoAlt} />
<p><strong>{section.name}</strong><br />{section.credentials}</p> <h3 class="no-balance">{section.name}, {section.credentials}</h3>
</div> </div>
<div> <div>
<h2>{section.heading}</h2> <h2>{section.heading}</h2>
<p>{section.quote}</p> <p><em>{section.quote}</em></p>
<img class="signature" src={`/assets/images/${section.signature}`} alt={section.signatureAlt} /> <img class="signature" src={`/assets/images/${section.signature}`} alt={section.signatureAlt} />
</div> </div>
</div> </div>
www/src/styles/components.css
+4 -2
View File
@@ -131,8 +131,10 @@
.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 { 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 div:hover { transform: scale(1.05); z-index: 1; }
.process-grid img { margin: 0 auto 1rem; width: 42%; } .process-grid img { margin: 0 auto 1rem; width: 42%; }
.director-card { align-items: center; display: flex; gap: 1.5rem; } .director-layout { grid-template-columns: 1fr 3.6fr; }
.director-card img { max-height: 260px; width: auto; } .director-card { text-align: left; }
.director-card img { border-radius: 3px ;height: auto; margin: 0 auto; width: 100%; }
.director-card h3 { font-family: var(--font-body); font-size: .84rem; letter-spacing: .5px; margin-top: 1rem; }
.signature { max-width: 270px; } .signature { max-width: 270px; }
.testimonial-section blockquote { margin: 2rem auto; max-width: 720px; text-align: center; } .testimonial-section blockquote { margin: 2rem auto; max-width: 720px; text-align: center; }
.testimonial-dots { color: var(--color-accent-strong); letter-spacing: .9rem; text-align: center; } .testimonial-dots { color: var(--color-accent-strong); letter-spacing: .9rem; text-align: center; }