styling fixes

Author: jellydeck

app/app.vue

@@ -142,11 +142,12 @@ if (import.meta.client) {
 .skip-link {
   position: fixed;
   top: -100%;
+  left: 0.25rem;
   z-index: 100;
 }
 
 .skip-link:focus {
-  top: 0;
+  top: 0.25rem;
 }
 </style>
 

app/components/AppFooter.vue

@@ -38,7 +38,7 @@ const showModal = () => modalRef.value?.showModal?.()
 
           <button
             type="button"
-            class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent outline-transparent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >

app/components/Button/Base.vue

@@ -27,14 +27,14 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-colors duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
       'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
       'opacity-40 cursor-not-allowed border-transparent': disabled,
     }"
     :type="props.type"

app/components/Button/Group.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex [&>*]:rounded-e-none [&>*:last-child]:rounded-e-md [&>*]:rounded-s-none [&>*:first-child]:rounded-s-md [&>*:not(:first-child)]:border-s-0 [&>*:focus-visible]:relative [&>*:focus-visible]:z-10"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ml-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:focus-visible]:(relative z-40)"
   >
     <slot />
   </component>

app/components/Link/Base.vue

@@ -75,19 +75,18 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
   </span>
   <NuxtLink
     v-else
-    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
+    class="group cursor-pointer gap-x-1.5 items-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent) transition-colors duration-200"
     :class="{
       'flex': block,
       'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
+      'font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
         isLink,
-      'justify-center border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
-        isButton,
+      'justify-center border border-solid border-border rounded-md  outline-offset-2': isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
       'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
     }"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"

app/components/Tag/Static.vue

@@ -13,7 +13,7 @@ const props = withDefaults(
 <template>
   <component
     :is="as"
-    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5 focus-visible:(outline-2 outline-accent)"
+    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5 outline-none"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />

app/pages/package/[[org]]/[name].vue

@@ -545,10 +545,8 @@ onKeyStroke(
             <button
               type="button"
               @click="copyPkgName()"
-              class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:(opacity-100 translate-y-0 pointer-events-auto) focus-visible:(outline-2 outline-accent pointer-events-auto translate-y-0 opacity-100)"
-              :class="
-                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
-              "
+              class="absolute z-20 inset-is-0 top-full inline-flex items-center bg-bg gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:(opacity-100 translate-y-0 pointer-events-auto) focus-visible:(outline-2 outline-accent pointer-events-auto translate-y-0)"
+              :class="copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted border-border'"
               :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
             >
               <span
@@ -610,7 +608,7 @@ onKeyStroke(
             v-if="resolvedVersion"
             as="nav"
             :aria-label="$t('package.navigation')"
-            class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
+            class="ms-auto flex max-sm:(fixed bottom-4 left-1/2 -translate-x-1/2 z-40 backdrop-blur-md)"
             :class="$style.packageNav"
           >
             <LinkBase