Jelajahi Sumber

Clients: scale up whitespace-heavy logos (Норникель, Атлас, УГХ)

xander 1 Minggu lalu
induk
melakukan
b836e25de1
1 mengubah file dengan 20 tambahan dan 14 penghapusan
  1. 20 14
      src/pages/index.astro

+ 20 - 14
src/pages/index.astro

@@ -25,18 +25,19 @@ const whyUs = [
   },
 ];
 
-// Client logos, arranged checkerboard: heavy dark logos alternate with light ones
+// Client logos, arranged checkerboard: heavy dark logos alternate with light ones.
+// `big` — logos with lots of internal whitespace, render larger to match the others optically
 const clients = [
-  "___1.png",                    // УГМК — heavy
-  "unnamed.jpg",                 // Атлас Майнинг — light
-  "c5aa9760-2920-4b4d-b.png",    // ВНИМИ — heavy
-  "29595058_20159791717.jpg",    // Норникель — light
-  "9f97a370e8530d40a0ff.jpg",    // РМК — heavy
-  "_2.jpg",                      // Полюс — light
-  "evraz.jpg",                   // Евраз — medium
-  "17304586690.jpg",             // УГХ — light
-  "photo-610z4l.jpg",            // Алроса — medium
-].map((f) => "/images/" + f);
+  { file: "___1.png" },                         // УГМК — heavy
+  { file: "unnamed.jpg", big: true },           // Атлас Майнинг — light
+  { file: "c5aa9760-2920-4b4d-b.png" },         // ВНИМИ — heavy
+  { file: "29595058_20159791717.jpg", big: true }, // Норникель — light
+  { file: "9f97a370e8530d40a0ff.jpg" },         // РМК — heavy
+  { file: "_2.jpg" },                           // Полюс — light
+  { file: "evraz.jpg" },                        // Евраз — medium
+  { file: "17304586690.jpg", big: true },       // УГХ — light
+  { file: "photo-610z4l.jpg" },                 // Алроса — medium
+].map((c) => ({ ...c, src: "/images/" + c.file }));
 ---
 
 <Base
@@ -181,9 +182,14 @@ const clients = [
       <!-- Client logos -->
       <div class="mt-12">
         <div class="grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3">
-          {clients.map((src) => (
-            <span class="flex h-28 w-full items-center justify-center">
-              <img src={src} alt="Логотип заказчика" class="max-h-24 w-auto max-w-[220px] object-contain" loading="lazy" />
+          {clients.map((c) => (
+            <span class="flex h-36 w-full items-center justify-center">
+              <img
+                src={c.src}
+                alt="Логотип заказчика"
+                class:list={["w-auto object-contain", c.big ? "max-h-36 max-w-[300px]" : "max-h-24 max-w-[220px]"]}
+                loading="lazy"
+              />
             </span>
           ))}
         </div>