feat(team): restyle cards to match live site and add image hover effect
Remove the bordered, aspect-ratio-constrained card style and replace with a plain flex-wrap grid of 227px cards using the live site's 4px-radius, borderless image treatment and smaller body-font labels. Wrap each image in a .team-thumb overflow container and add a scale(1.1)→scale(1.05) zoom-out transition on hover, matching the Growmeda plugin behavior on the live page. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -47,7 +47,9 @@ const groups = [
|
|||||||
<div class="team-grid">
|
<div class="team-grid">
|
||||||
{group.members.map(([image, name, role]) => (
|
{group.members.map(([image, name, role]) => (
|
||||||
<article class="team-member">
|
<article class="team-member">
|
||||||
|
<div class="team-thumb">
|
||||||
<img src={`/assets/images/${image}`} alt={name} loading="lazy" />
|
<img src={`/assets/images/${image}`} alt={name} loading="lazy" />
|
||||||
|
</div>
|
||||||
<h3>{name}</h3>
|
<h3>{name}</h3>
|
||||||
<p>{role}</p>
|
<p>{role}</p>
|
||||||
</article>
|
</article>
|
||||||
@@ -71,15 +73,15 @@ const groups = [
|
|||||||
.team-intro .script-label { font-size: 1.8rem; }
|
.team-intro .script-label { font-size: 1.8rem; }
|
||||||
.team-group { padding-block: 2rem 4rem; text-align: center; }
|
.team-group { padding-block: 2rem 4rem; text-align: center; }
|
||||||
.team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
|
.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-grid { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; 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 { flex: 0 0 227px; }
|
||||||
.team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
|
.team-thumb { border-radius: 4px; overflow: hidden; }
|
||||||
.team-member p { margin: 0; }
|
.team-thumb img { display: block; object-fit: cover; transform: scale(1.1); transition: transform .5s; width: 100%; }
|
||||||
.team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
|
.team-thumb img:hover { transform: scale(1.05); }
|
||||||
|
.team-member h3 { font-family: var(--font-body); font-size: .8rem; margin-bottom: 0; }
|
||||||
|
.team-member p { font-size: .85rem; margin: 0; }
|
||||||
|
.team-careers { background: var(--color-tint); padding-block: 5rem; }
|
||||||
@media (max-width: 950px) {
|
@media (max-width: 950px) {
|
||||||
.team-grid { grid-template-columns: 1fr; }
|
.team-member { flex-basis: min(100%, 227px); }
|
||||||
}
|
|
||||||
@media (min-width: 761px) and (max-width: 1050px) {
|
|
||||||
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user