refactor: use justify-content: space-between in AppFooter

In #318, `justify-content: space-between` was removed unnecessary and a
hack was introduced in its place.

Flexbox layout already is directionality/writing-mode aware and
`justify-content` has no bearing on the order of items, just their
placement within the “main” axis.

This switches back to what it was before which is simpler as it doesn’t
add extra elements, presentational elements that are hidden with ARIA.

Author: knowler

app/components/AppFooter.vue

@@ -1,50 +1,49 @@
 <template>
   <footer class="border-t border-border mt-auto">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-start gap-2 sm:gap-4">
+      <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
         <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
-        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-        <div class="flex items-center justify-start gap-3 sm:gap-6">
+        <div class="flex items-center gap-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
           >
-            <span>{{ $t('footer.about') }}</span>
+            {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.docs') }}</span>
+            {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex justify-start items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.source') }}</span>
+            {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.social') }}</span>
+            {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.chat') }}</span>
+            {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
         </div>