fix(ui): improve logo

Author: vladh

app/components/AppHeader.vue

@@ -205,9 +205,9 @@ onKeyStroke(
         v-if="!isSearchExpanded && !isOnHomePage"
         to="/"
         :aria-label="$t('header.home')"
-        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring"
+        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
       >
-        <AppLogo class="w-8 h-8 rounded-lg" />
+        <AppMark class="w-6 h-auto" />
       </NuxtLink>
 
       <!-- Desktop: Logo (navigates home) -->
@@ -216,13 +216,12 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4"
         >
-          <AppLogo class="w-7 h-7 rounded-lg" />
-          <span class="pb-0.5">npmx</span>
+          <AppLogo class="w-20 h-auto" />
           <span
             aria-hidden="true"
-            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -inset-ie-1"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute -bottom-2 -inset-ie-1"
           >
             {{ env === 'release' ? 'alpha' : env }}
           </span>

app/components/AppLogo.vue

@@ -8,25 +8,37 @@ defineProps<{
   <svg
     aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    width="96"
-    height="96"
+    viewBox="0 0 602 153"
+    width="602"
+    height="153"
     :class="class"
   >
     <title>{{ $t('alt_logo') }}</title>
-    <rect fill="var(--bg)" width="512" height="512" rx="64" />
-    <rect fill="currentColor" x="110" y="310" width="60" height="60" />
-    <text
+    <path d="m0.93476 97.205h24.081v23.693h-24.081z" fill="currentColor" stroke-width=".26458" />
+    <path
+      d="m176.66 17.97h14.954l0.3884 18.449q4.0783-10.293 12.817-15.536 8.9334-5.2435 20.003-5.2435 17.09 0 26.412 11.07 9.3218 10.875 9.3218 27.965v66.223h-16.313v-61.562q0-29.325-22.916-29.325-12.429 0-20.391 7.7681-7.9623 7.7681-7.9623 21.557v61.562h-16.313z"
+      fill="currentColor"
+      stroke-width=".26458"
+    />
+    <path
+      d="m386.95 17.97h14.954l0.38842 15.148q2.7188-8.3507 7.9624-12.817 5.2435-4.6609 12.429-4.6609 15.925 0 19.42 20.197 2.5246-9.516 8.3507-14.759 5.8261-5.4377 13.788-5.4377 12.429 0 18.061 8.7392 5.6319 8.545 5.6319 28.159v68.36h-16.313v-66.029q0-13.4-2.9131-19.032-2.913-5.8261-9.1276-5.8261-6.4087 0-10.293 6.4087-3.6899 6.2145-3.6899 18.838v65.641h-16.313v-66.029q0-13.206-2.913-19.032-2.7188-5.8261-9.1276-5.8261t-10.293 6.4087q-3.6899 6.2145-3.6899 18.838v65.641h-16.313z"
+      fill="currentColor"
+      stroke-width=".26458"
+    />
+    <path
+      d="m279.21 17.97h15.148l0.19415 16.507q4.6609-9.1276 12.817-13.983 8.3508-4.8551 18.838-4.8551 14.759 0 24.664 7.3797 9.9044 7.1855 14.759 19.42t4.8551 26.994q0 14.759-4.8551 26.994t-14.759 19.615q-9.9044 7.1855-24.664 7.1855-10.099 0-18.449-4.2725-8.1565-4.2725-12.235-11.652v42.725h-16.313zm45.444 89.722q13.4 0 20.974-10.099 7.7682-10.099 7.7682-28.159 0-18.061-7.7682-28.159-7.5739-10.099-20.974-10.099-13.594 0-21.362 9.9044-7.7682 9.7102-7.7682 28.354 0 18.644 7.5739 28.548 7.7682 9.7102 21.557 9.7102z"
+      fill="currentColor"
+      stroke-width=".26458"
+    />
+    <path
+      d="m543.04 68.074-35.928-50.104h19.032l26.994 38.841 26.412-38.841h19.42l-35.733 50.493 37.481 52.435h-19.032l-28.548-41.56-28.548 41.56h-19.42z"
+      fill="currentColor"
+      stroke-width=".26458"
+    />
+    <path
+      d="m99.501 1.0149-49.929 141.25h15.537l49.927-141.25z"
       fill="var(--accent)"
-      x="320"
-      y="370"
-      font-family="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-      font-size="420"
-      font-weight="500"
-      text-anchor="middle"
-      style="user-select: none"
-    >
-      <tspan>/</tspan>
-    </text>
+      stroke-width=".26458"
+    />
   </svg>
 </template>

app/components/AppMark.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 153 153"
+    width="153"
+    height="153"
+    :class="class"
+  >
+    <title>{{ $t('alt_logo') }}</title>
+    <path d="m19.449 97.205h24.081v23.693h-24.081z" fill="currentColor" stroke-width=".26458" />
+    <path
+      d="m118.02 1.0149-49.929 141.25h15.537l49.927-141.25z"
+      fill="var(--accent)"
+      stroke-width=".26458"
+    />
+  </svg>
+</template>

app/pages/index.vue

@@ -34,15 +34,12 @@ defineOgImageComponent('Default', {
       >
         <h1
           dir="ltr"
-          class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
+          class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-6 motion-safe:animate-fade-in motion-safe:animate-fill-both"
         >
-          <AppLogo
-            class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl"
-          />
-          <span class="pb-4">npmx</span>
+          <AppLogo class="w-42 h-auto sm:w-58 md:w-70" />
           <span
             aria-hidden="true"
-            class="scale-15 transform-origin-br font-mono tracking-widest text-accent absolute bottom-3 -inset-ie-1.5"
+            class="text-sm sm:text-base md:text-lg transform-origin-br font-mono tracking-widest text-accent absolute -bottom-4 -inset-ie-1.5"
           >
             {{ env === 'release' ? 'alpha' : env }}
           </span>