fix: keep wordmark from wrapping on narrow viewports

Two changes:
- Wordmark.vue now forces whitespace-nowrap on the outer frame and
  both inner spans, plus flex-nowrap on the row, so EARTH WALKER and
  DESIGN can never wrap inside the box regardless of the parent's
  width constraints.
- SiteHeader swaps to a plain serif "Earth Walker" wordmark below
  md: — at the actual mobile header width (viewport minus locale +
  theme + hamburger icons) the boxed mark would crowd to the point of
  illegibility even without wrapping. Full boxed Wordmark stays in
  the hero, the footer, and the mobile drawer where there's room.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-05-27 12:28:15 +02:00
commit 94c8bfaa0a
2 changed files with 19 additions and 4 deletions

View file

@ -36,7 +36,12 @@ const mobileOpen = ref(false)
class="text-foreground" class="text-foreground"
:aria-label="t('brand')" :aria-label="t('brand')"
> >
<Wordmark size="sm" /> <span
class="font-serif text-sm font-semibold uppercase tracking-[0.22em] md:hidden"
>
Earth Walker
</span>
<Wordmark size="sm" class="hidden md:inline-flex" />
</RouterLink> </RouterLink>
<nav class="hidden items-center gap-8 md:flex"> <nav class="hidden items-center gap-8 md:flex">

View file

@ -31,15 +31,25 @@ const designClasses: Record<Size, string> = {
<template> <template>
<span <span
:class="[ :class="[
'inline-flex items-baseline border border-current uppercase', 'inline-flex flex-nowrap items-baseline whitespace-nowrap border border-current uppercase',
frameClasses[props.size], frameClasses[props.size],
]" ]"
aria-label="Earth Walker Design" aria-label="Earth Walker Design"
> >
<span :class="['font-serif font-semibold', earthClasses[props.size]]"> <span
:class="[
'whitespace-nowrap font-serif font-semibold',
earthClasses[props.size],
]"
>
Earth Walker Earth Walker
</span> </span>
<span :class="['font-serif font-light opacity-90', designClasses[props.size]]"> <span
:class="[
'whitespace-nowrap font-serif font-light opacity-90',
designClasses[props.size],
]"
>
Design Design
</span> </span>
</span> </span>