feat: make stable ui for partners

Author: alexdln

app/assets/logos/oss-partners/index.ts

@@ -77,13 +77,11 @@ export const OSS_PARTNERS = [
     name: 'Nuxt',
     logo: LogoNuxt,
     url: 'https://nuxt.com/',
-    maxHeight: '3.2rem',
   },
   {
     name: 'Vue',
     logo: LogoVue,
     url: 'https://vuejs.org/',
-    maxHeight: '3.5rem',
   },
   {
     name: 'Algolia',
@@ -138,7 +136,6 @@ export const OSS_PARTNERS = [
     name: 'Vue Data UI',
     logo: LogoVueDataUi,
     url: 'https://vue-data-ui.graphieros.com/',
-    maxHeight: '3.5rem',
   },
   {
     name: 'UnJS',

app/assets/logos/sponsors/index.ts

@@ -19,15 +19,15 @@ import LogoChromaticLight from './chromatic-light.svg'
 //
 // If there are no original assets and the logo is not universal, you can add only the dark theme variant
 // and specify 'auto' for the light one - this will grayscale the logo and invert it in light mode.
-// The maxHeight is used to make some logos more visually consistent with the others.
+// The normalisingIndent is the Y-axis space to visually stabilize favicon-only logos with logotypes that contain long name.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
-    maxHeight: '2.8rem',
+    normalisingIndent: '0.875rem',
     url: 'https://vercel.com/',
   },
   {
@@ -36,7 +36,7 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
-    maxHeight: '2.8rem',
+    normalisingIndent: '0.875rem',
     url: 'https://voidzero.dev/',
   },
   {
@@ -45,7 +45,7 @@ export const SPONSORS = [
       dark: LogoVlt,
       light: LogoVltLight,
     },
-    maxHeight: '2.8rem',
+    normalisingIndent: '0.875rem',
     url: 'https://vlt.sh/',
   },
   {
@@ -54,6 +54,7 @@ export const SPONSORS = [
       dark: LogoNetlify,
       light: LogoNetlifyLight,
     },
+    normalisingIndent: '0.25rem',
     url: 'https://netlify.com/',
   },
   {
@@ -62,7 +63,7 @@ export const SPONSORS = [
       dark: LogoBluesky,
       light: LogoBlueskyLight,
     },
-    maxHeight: '3.2rem',
+    normalisingIndent: '0.625rem',
     url: 'https://bsky.app/',
   },
   {

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

@@ -2,7 +2,7 @@
 type BaseItem = {
   name: string
   url: string
-  maxHeight?: string
+  normalisingIndent?: string
   logo:
     | string
     | {
@@ -22,41 +22,51 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex flex-wrap gap-2 md:gap-x-4 md:gap-y-3 -mx-2 list-none">
-    <li v-for="item in list" :key="item.name" class="flex items-center justify-center">
+  <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-16 min-w-16 rounded-md hover:bg-fg/10 transition-colors p-2"
-        :style="{ maxHeight: item.maxHeight }"
+        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-12 min-w-12 rounded-md hover:bg-fg/10 transition-colors p-1"
-              :style="{ maxHeight: groupItem.maxHeight }"
+              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"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="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"
           />
         </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"
+          />
         </div>
 
         <div>