feat(web): restyle partner sections
This commit is contained in:
@@ -10,8 +10,8 @@
|
||||
Facts a four-cell seam grid: the run, the coverage, the lead
|
||||
partner and the funder.
|
||||
Nationwide the approved body prose beside the three focus areas.
|
||||
Consortium the three members as role / name / deliverable panels, under
|
||||
a header row that carries the EU funding line.
|
||||
Consortium unboxed rows for the three members.
|
||||
The header carries the EU funding line.
|
||||
Legacy the SHARP I and II panel with the accent start-edge, and the
|
||||
call to action into What We Do.
|
||||
|
||||
@@ -157,7 +157,7 @@ const ACCENT_EDGE =
|
||||
interface ConsortiumMember {
|
||||
id: string;
|
||||
name: string;
|
||||
/** The role chip - `consortium.role` in the CMS, or the bundled copy's. */
|
||||
/** The role label - `consortium.role` in the CMS, or the bundled copy's. */
|
||||
role: string | null;
|
||||
description: string;
|
||||
website: string | null;
|
||||
@@ -301,33 +301,36 @@ export default function About({ loaderData }: Route.ComponentProps) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="grid list-none grid-cols-1 gap-lg md:grid-cols-3">
|
||||
<ul className="list-none divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)]">
|
||||
{consortium.map((member) => (
|
||||
<li key={member.id}>
|
||||
<InfoPanel
|
||||
/* On the sunken band the draft lifts these cards to the
|
||||
raised dark it uses for a page band (#1d1d1b), one step
|
||||
lighter than the panel shade InfoPanel defaults to. The
|
||||
`!` is what makes the override beat the component's own
|
||||
`bg-*` utility, which sorts after this one. */
|
||||
className="sh-lift sh-reveal sh-reveal--in hover:border-[var(--border-accent)]"
|
||||
title={member.name}
|
||||
{...(member.role
|
||||
? { eyebrow: member.role, eyebrowVariant: "chip" as const }
|
||||
: {})}
|
||||
<li
|
||||
key={member.id}
|
||||
className="sh-reveal sh-reveal--in grid grid-cols-1 gap-md py-lg md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-xl"
|
||||
>
|
||||
<span className="block">{member.description}</span>
|
||||
<div className="flex flex-col gap-xs">
|
||||
{member.role ? (
|
||||
<p className="label-md uppercase text-[var(--text-accent)]">
|
||||
{member.role}
|
||||
</p>
|
||||
) : null}
|
||||
<h3 className="heading-h3 text-[var(--text-primary)]">
|
||||
{member.website ? (
|
||||
<a
|
||||
href={member.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-xs inline-block body-sm-bold text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]"
|
||||
className="text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]"
|
||||
>
|
||||
{member.name}
|
||||
</a>
|
||||
) : null}
|
||||
</InfoPanel>
|
||||
) : (
|
||||
member.name
|
||||
)}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="body-md text-[var(--text-secondary)]">
|
||||
{member.description}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -141,10 +141,9 @@ const PARTNER_PAGE_SIZE = 36;
|
||||
/**
|
||||
* Below this many partners the wall stays a grid.
|
||||
*
|
||||
* The marquee loops by carrying the tiles twice and sliding exactly half the
|
||||
* track, which only reads as a loop while the half is wider than the frame it
|
||||
* slides through. Eight 178px tiles clear a desktop container; fewer would
|
||||
* drift a short row across an empty band, so the grid keeps them still.
|
||||
* The loop slides exactly half the track; fewer than eight wider tiles would
|
||||
* leave a short drift instead of filling a desktop frame, so the grid keeps
|
||||
* them still.
|
||||
*/
|
||||
const PARTNER_MARQUEE_MIN = 8;
|
||||
/** The draft's newsroom band is a straight three-up row. */
|
||||
@@ -487,10 +486,21 @@ function PartnerTile({
|
||||
src={partner.logo.src}
|
||||
alt={decorative ? "" : partner.name}
|
||||
loading="lazy"
|
||||
className="max-h-[3.5rem] w-auto max-w-full object-contain"
|
||||
className={cx(
|
||||
"w-auto max-w-full object-contain",
|
||||
fixedWidth
|
||||
? "h-[6.75rem] transition-transform duration-[var(--motion-duration-base)] group-hover:scale-105"
|
||||
: "max-h-[3.5rem]",
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<span className="body-sm-bold text-center text-[var(--text-secondary)]">
|
||||
<span
|
||||
className={cx(
|
||||
"body-sm-bold text-center text-[var(--text-secondary)]",
|
||||
fixedWidth &&
|
||||
"transition-colors duration-[var(--motion-duration-base)] group-hover:text-[var(--text-accent)]",
|
||||
)}
|
||||
>
|
||||
{partner.name}
|
||||
</span>
|
||||
);
|
||||
@@ -499,17 +509,16 @@ function PartnerTile({
|
||||
<li
|
||||
{...(decorative ? { "aria-hidden": true } : {})}
|
||||
className={cx(
|
||||
"flex h-[5.5rem] items-center justify-center",
|
||||
"rounded-control border border-[var(--border-subtle)] bg-[var(--surface-card)] p-md",
|
||||
"transition-colors duration-[var(--motion-duration-base)]",
|
||||
"hover:border-[var(--border-accent)]",
|
||||
"flex items-center justify-center",
|
||||
fixedWidth
|
||||
? "group me-lg h-[7.5rem] w-[12.5rem] shrink-0 ps-lg pe-lg"
|
||||
: "h-[5.5rem] rounded-control border border-[var(--border-subtle)] bg-[var(--surface-card)] p-md transition-colors duration-[var(--motion-duration-base)] hover:border-[var(--border-accent)] sh-reveal sh-reveal--in",
|
||||
/* A still grid reveals tile by tile; a travelling track must not, or
|
||||
each tile would ramp its own opacity while it moves.
|
||||
|
||||
The track's spacing is a margin on the tile rather than a `gap` on
|
||||
the row: the loop slides exactly half the track, so each half has to
|
||||
carry its own trailing space or the seam lands half a gap short. */
|
||||
fixedWidth ? "me-md w-[11.125rem] shrink-0" : "sh-reveal sh-reveal--in",
|
||||
decorative && "sh-marquee__clone",
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user