Sponsors: one compact row per sponsor, sponsored links, full-resolution logo

src/components/SiteFooter.astro

@@ -31,7 +31,7 @@ const link = (path: string) => ({ href: localePath(lang, path), "data-localize":
       </p>
       <p class="mt-3 text-[var(--color-muted)]">
         <Bi en={en.common.sponsors} zh={zh.common.sponsors} both={bilingual} />{sponsors.map((s) => (
-          <Fragment><a href={s.href} target="_blank" rel="noopener" class="underline decoration-white/20 underline-offset-[3px] hover:text-white">{s.name}</a> · </Fragment>
+          <Fragment><a href={s.href} target="_blank" rel="sponsored noopener" class="underline decoration-white/20 underline-offset-[3px] hover:text-white">{s.name}</a> · </Fragment>
         ))}<a {...link("/sponsors")} class="underline decoration-white/20 underline-offset-[3px] hover:text-white"><Bi en={en.common.sponsorsCta} zh={zh.common.sponsorsCta} both={bilingual} /></a>
       </p>
     </div>

src/components/pages/LitePage.astro

@@ -162,8 +162,8 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
           <p class="sponsor rise" style="--d:3">
             <span>{ui.sponsors}</span>
             {sponsors.map((s) => (
-              <a class="sponsor-logo" href={s.href} target="_blank" rel="noopener">
-                <img src={s.logo} alt={s.name} width={s.logoWidth / 6} height={s.logoHeight / 6} />
+              <a class="sponsor-logo" href={s.href} target="_blank" rel="sponsored noopener">
+                <img src={s.logo} alt={s.name} width={s.logoWidth / 10} height={s.logoHeight / 10} />
               </a>
             ))}
             <a class="sponsor-cta" href={localePath(lang, "/sponsors")}>{ui.sponsorsCta}</a>
@@ -1019,11 +1019,6 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
   }
   .sponsor-logo {
     display: inline-flex;
-    opacity: 0.8;
-    transition: opacity 160ms;
-  }
-  .sponsor-logo:hover {
-    opacity: 1;
   }
   .sponsor-logo img {
     display: block;

src/components/pages/SponsorsPage.astro

@@ -30,19 +30,19 @@ const jsonLd = [
         <h1 class="nx-h1 sp-h1 nx-rise" style="--d:1"><span class="nx-grad">{c.hero.title}</span></h1>
         <p class="nx-sub nx-rise" style="--d:2">{c.hero.sub}</p>
 
-        <!-- One tile per sponsor: logo, the sponsor's own tagline and description, and its site -->
+        <!-- One row per sponsor: its logo on its own black plate, then its tagline, description and site -->
         <div class="sp-list nx-rise" style="--d:3">
           {sponsors.map((s) => {
             const e = c.entries[s.name];
             return (
               <article class="nx-tile sp-card">
-                <a href={s.href} target="_blank" rel="noopener" class="sp-logo">
+                <a href={s.href} target="_blank" rel="sponsored noopener" class="sp-plate">
                   <img src={s.logo} alt={s.name} width={s.logoWidth / 3} height={s.logoHeight / 3} />
                 </a>
-                <h2 class="sp-tagline">{e.tagline}</h2>
-                <p class="nx-body">{e.body}</p>
-                <div class="nx-actions">
-                  <a href={s.href} target="_blank" rel="noopener" class="nx-pill">{e.visit}</a>
+                <div class="sp-content">
+                  <h2 class="sp-tagline">{e.tagline}</h2>
+                  <p class="nx-body">{e.body}</p>
+                  <a href={s.href} target="_blank" rel="sponsored noopener" class="nx-link sp-site">{e.visit}</a>
                 </div>
               </article>
             );
@@ -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;

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,
   },
 ];