feat: add vlt as sponsor 🚀

app/assets/logos/sponsors/index.ts

@@ -2,20 +2,24 @@ import LogoVercel from './vercel.svg'
 import LogoVercelLight from './vercel-light.svg'
 import LogoVoidZero from './void-zero.svg'
 import LogoVoidZeroLight from './void-zero-light.svg'
+import LogoVlt from './vlt.svg'
+import LogoVltLight from './vlt-light.svg'
 
 // The list is used on the about page. To add, simply upload the logos nearby and add an entry here. Prefer SVGs.
 // For logo src, specify a string or object with the light and dark theme variants.
 // Prefer original assets from partner sites to keep their brand identity.
 //
 // 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.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://vercel.com/',
   },
   {
@@ -24,6 +28,16 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://voidzero.dev/',
   },
+  {
+    name: 'vlt',
+    logo: {
+      dark: LogoVlt,
+      light: LogoVltLight,
+    },
+    normalisingIndent: '0.25rem',
+    url: 'https://vlt.sh/',
+  },
 ]

app/components/About/LogoImg.vue

@@ -11,30 +11,30 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="typeof src === 'string'">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-9" :alt="alt" />
+    <img :src="src" loading="lazy" height="36" class="w-auto block h-full" :alt="alt" />
   </div>
-  <div v-else-if="src.light === 'auto'">
+  <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-9"
+      class="w-auto block light:invert light:grayscale h-full"
       :alt="alt"
     />
   </div>
-  <div v-else>
+  <div v-else class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:hidden h-9"
+      class="w-auto block light:hidden h-full"
       :alt="alt"
     />
     <img
       :src="src.light"
       loading="lazy"
       height="36"
-      class="w-auto block hidden light:block h-9"
+      class="w-auto block hidden light:block h-full"
       :alt="alt"
     />
   </div>

app/components/About/LogoList.vue

@@ -2,6 +2,7 @@
 type BaseItem = {
   name: string
   url: string
+  normalisingIndent?: string
   logo:
     | string
     | {
@@ -21,14 +22,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex items-center flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
+  <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">
       <a
         v-if="'logo' in item"
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex items-center justify-center h-full min-w-11 rounded-md hover:bg-fg/10 transition-colors p-1"
+        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 }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
@@ -53,7 +55,8 @@ const props = defineProps<{
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center justify-center h-full min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              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 }"
               :aria-label="groupItem.name"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />

app/pages/about.vue

@@ -157,18 +157,21 @@ const roleLabels = computed(
           </ul>
         </div>
 
-        <div>
+        <div class="sponsors-logos">
           <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.sponsors.title') }}
           </h2>
-          <AboutLogoList :list="SPONSORS" />
+          <AboutLogoList
+            :list="SPONSORS"
+            class="flex-col gap-6 items-start md:flex-row md:items-center md:gap-4"
+          />
         </div>
 
         <div>
           <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.oss_partners.title') }}
           </h2>
-          <AboutLogoList :list="OSS_PARTNERS" />
+          <AboutLogoList :list="OSS_PARTNERS" class="items-center" />
         </div>
 
         <div>