fix: adjust logo sizing on about page

Author: vladh

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

@@ -77,11 +77,13 @@ 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',
@@ -136,6 +138,7 @@ 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

@@ -15,15 +15,15 @@ import LogoBlueskyLight from './bluesky-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 normalisingIndent is the Y-axis space to visually stabilize favicon-only logos with logotypes that contain long name.
+// The maxHeight is used to make some logos more visually consistent with the others.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
-    normalisingIndent: '0.875rem',
+    maxHeight: '2.8rem',
     url: 'https://vercel.com/',
   },
   {
@@ -32,7 +32,7 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
-    normalisingIndent: '0.875rem',
+    maxHeight: '2.8rem',
     url: 'https://voidzero.dev/',
   },
   {
@@ -41,7 +41,7 @@ export const SPONSORS = [
       dark: LogoVlt,
       light: LogoVltLight,
     },
-    normalisingIndent: '0.875rem',
+    maxHeight: '2.8rem',
     url: 'https://vlt.sh/',
   },
   {
@@ -50,7 +50,6 @@ export const SPONSORS = [
       dark: LogoNetlify,
       light: LogoNetlifyLight,
     },
-    normalisingIndent: '0.125rem',
     url: 'https://netlify.com/',
   },
   {
@@ -59,7 +58,7 @@ export const SPONSORS = [
       dark: LogoBluesky,
       light: LogoBlueskyLight,
     },
-    normalisingIndent: '0.625rem',
+    maxHeight: '3.2rem',
     url: 'https://bsky.app/',
   },
 ]

app/components/About/LogoList.vue

@@ -2,7 +2,7 @@
 type BaseItem = {
   name: string
   url: string
-  normalisingIndent?: string
+  maxHeight?: string
   logo:
     | string
     | {
@@ -22,15 +22,15 @@ 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="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">
       <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"
-        :style="{ paddingBlock: item.normalisingIndent }"
+        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 }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
@@ -55,8 +55,8 @@ const props = defineProps<{
               :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"
-              :style="{ paddingBlock: groupItem.normalisingIndent }"
+              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 }"
               :aria-label="groupItem.name"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />