fix: adjust logo sizing on about page (#1986)

Co-authored-by: Joaquín Sánchez <userquin@gmail.com>
Co-authored-by: Vordgi <sasha2822222@gmail.com>

Author: 3 people

app/assets/logos/sponsors/index.ts

@@ -54,7 +54,7 @@ export const SPONSORS = [
       dark: LogoNetlify,
       light: LogoNetlifyLight,
     },
-    normalisingIndent: '0.125rem',
+    normalisingIndent: '0.25rem',
     url: 'https://netlify.com/',
   },
   {

app/components/About/LogoImg.vue

@@ -11,14 +11,20 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="typeof src === 'string'" class="h-full">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-full" :alt="alt" />
+    <img
+      :src="src"
+      loading="lazy"
+      height="36"
+      class="h-full w-full object-contain block"
+      :alt="alt"
+    />
   </div>
   <div v-else-if="src.light === 'auto'" class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:invert light:grayscale h-full"
+      class="h-full w-full object-contain block light:invert light:grayscale"
       :alt="alt"
     />
   </div>
@@ -27,14 +33,14 @@ const props = defineProps<{
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:hidden h-full"
+      class="h-full w-full object-contain block light:hidden"
       :alt="alt"
     />
     <img
       :src="src.light"
       loading="lazy"
       height="36"
-      class="w-auto block hidden light:block h-full"
+      class="h-full w-full object-contain block hidden light:block"
       :alt="alt"
     />
   </div>

app/components/About/LogoList.vue

@@ -22,40 +22,50 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
-    <li v-for="item in list" :key="item.name">
+  <ul class="list-none">
+    <li
+      v-for="item in list"
+      :key="item.name"
+      :style="
+        'items' in item && `grid-column: span ${item.items.length} / span ${item.items.length};`
+      "
+    >
       <a
         v-if="'logo' in item"
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="relative flex items-center justify-center h-14 min-w-14 rounded-md hover:bg-fg/10 transition-colors p-1"
+        class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border transition-colors py-1 px-3"
         :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
       </a>
-      <div v-else-if="item.items" class="relative flex items-center justify-center">
+      <div
+        v-else-if="item.items"
+        class="relative flex items-center justify-center h-full bg-bg-muted border border-border rounded-md py-1 px-2"
+      >
         <svg
           width="11"
           height="38"
           viewBox="0 0 11 38"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
+          class="h-full w-auto"
         >
           <path
             d="M5.62151 0C-1.8519 10.6931 -1.89574 27.2683 5.62151 37.9997H10.6709C3.15538 27.2683 3.19922 10.6931 10.6709 0H5.62151Z"
             fill="currentColor"
           />
         </svg>
         <ul class="flex items-center justify-center h-full gap-0.5 list-none">
-          <li v-for="groupItem in item.items" :key="groupItem.name">
+          <li v-for="groupItem in item.items" :key="groupItem.name" class="h-full">
             <a
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="relative flex items-center justify-center h-10 min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border transition-colors p-1.5"
               :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >
@@ -70,6 +80,7 @@ const props = defineProps<{
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
+          class="h-full w-auto"
         >
           <path
             d="M5.04935 0H0C7.4734 10.6931 7.51725 27.2683 0 37.9997H5.04935C12.5648 27.2683 12.521 10.6931 5.04935 0Z"

app/pages/about.vue

@@ -156,7 +156,7 @@ const roleLabels = computed(
           </h2>
           <AboutLogoList
             :list="SPONSORS"
-            class="grid grid-cols-2 md:flex md:flex-row md:items-center"
+            class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4 grid-flow-row-dense"
           />
         </div>
 
@@ -165,7 +165,10 @@ const roleLabels = computed(
           <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.oss_partners.title') }}
           </h2>
-          <AboutLogoList :list="OSS_PARTNERS" class="items-center" />
+          <AboutLogoList
+            :list="OSS_PARTNERS"
+            class="grid grid-cols-[repeat(auto-fill,minmax(64px,1fr))] gap-4 grid-flow-row-dense"
+          />
         </div>
 
         <div>