chore: configure normalising-indents to stabilise partners

Author: alexdln

app/assets/logos/sponsors/index.ts

@@ -11,13 +11,15 @@ import LogoVltLight from './vlt-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.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://vercel.com/',
   },
   {
@@ -26,6 +28,7 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://voidzero.dev/',
   },
   {
@@ -34,6 +37,7 @@ export const SPONSORS = [
       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
     | {
@@ -28,7 +29,8 @@ const props = defineProps<{
         :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

@@ -163,7 +163,7 @@ const roleLabels = computed(
           </h2>
           <AboutLogoList
             :list="SPONSORS"
-            class="flex-col gap-8 items-start md:flex-row md:items-center md:gap-4"
+            class="flex-col gap-6 items-start md:flex-row md:items-center md:gap-4"
           />
         </div>
 
@@ -306,17 +306,3 @@ const roleLabels = computed(
     </article>
   </main>
 </template>
-
-<style scoped>
-.sponsors-logos :deep(a) {
-  width: 8rem;
-  height: 2.5rem;
-}
-
-.sponsors-logos :deep(img) {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-}
-</style>