diff --git a/public/sponsors/voyageage.png b/public/sponsors/voyageage.png index 375e553..680c6fd 100644 Binary files a/public/sponsors/voyageage.png and b/public/sponsors/voyageage.png differ diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro index 989dfd1..9ae0df4 100644 --- a/src/components/SiteFooter.astro +++ b/src/components/SiteFooter.astro @@ -31,7 +31,7 @@ const link = (path: string) => ({ href: localePath(lang, path), "data-localize":

{sponsors.map((s) => ( - {s.name} · + {s.name} · ))}

diff --git a/src/components/pages/LitePage.astro b/src/components/pages/LitePage.astro index 4ba847f..f29749f 100644 --- a/src/components/pages/LitePage.astro +++ b/src/components/pages/LitePage.astro @@ -162,8 +162,8 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;

{c.hero.title}

{c.hero.sub}

- +
{sponsors.map((s) => { const e = c.entries[s.name]; return (
- {s.name} -

{e.tagline}

-

{e.body}

-
- {e.visit} +
+

{e.tagline}

+

{e.body}

+ {e.visit}
); @@ -88,36 +88,61 @@ const jsonLd = [ display: grid; gap: 12px; } + /* Plate and copy side by side, the plate on top on narrow screens */ .sp-card { - padding: 36px; + display: grid; + padding: 0; } - @media (max-width: 639px) { + @media (min-width: 768px) { .sp-card { - padding: 26px 22px; + grid-template-columns: 300px minmax(0, 1fr); } } - .sp-logo { - display: inline-block; + /* The sponsor's own plate: its logo on black */ + .sp-plate { + position: relative; + display: grid; + place-items: center; + min-height: 140px; + padding: 24px; + background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%), #050505; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + } + @media (min-width: 768px) { + .sp-plate { + border-bottom: 0; + border-right: 1px solid rgba(255, 255, 255, 0.08); + } } - .sp-logo img { + .sp-plate img { display: block; - width: 240px; + width: 210px; max-width: 100%; height: auto; } + .sp-content { + position: relative; + padding: 26px 32px 22px; + } + @media (max-width: 639px) { + .sp-content { + padding: 22px 22px 18px; + } + } .sp-tagline { - margin: 28px 0 0; - font-size: 22px; + margin: 0; + font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: #fff; + text-wrap: balance; } .sp-card .nx-body { - margin-top: 12px; - max-width: 560px; + margin-top: 8px; + max-width: 720px; } - .sp-card .nx-actions { - margin-top: 28px; + .sp-site { + margin-top: 4px; } .sp-become { display: flex; diff --git a/src/i18n/pages/sponsors.ts b/src/i18n/pages/sponsors.ts index 02c4761..1cfd93d 100644 --- a/src/i18n/pages/sponsors.ts +++ b/src/i18n/pages/sponsors.ts @@ -10,7 +10,7 @@ export interface Sponsor { href: string; /** A white logo on a transparent background, under public/sponsors */ logo: string; - /** The logo's pixel size; it is shown at half of it or less */ + /** The logo's pixel size; it is shown at a third of it or less */ logoWidth: number; logoHeight: number; } @@ -20,8 +20,8 @@ export const sponsors: Sponsor[] = [ name: "VoyageAge", href: "https://www.voyageage.com", logo: "/sponsors/voyageage.png", - logoWidth: 720, - logoHeight: 108, + logoWidth: 1200, + logoHeight: 180, }, ];