sync styles with Readme + some cleanup

Author: jellydeck

app/components/AppHeader.vue

@@ -190,8 +190,7 @@ onKeyStroke(
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 border-b border-border">
-    <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
+  <header class="sticky top-0 z-50 border-b border-border bg-bg/80 backdrop-blur-md">
     <nav
       :aria-label="$t('nav.main_navigation')"
       class="relative container min-h-14 flex items-center gap-2 z-1"

app/components/Button/Group.vue

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

app/components/Link/Base.vue

@@ -106,7 +106,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
     />
     <span
       v-else-if="isLinkAnchor && isLink"
-      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
+      class="i-carbon:link size-[1em] opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
     <kbd

app/components/Readme.vue

@@ -135,26 +135,26 @@ function handleClick(event: MouseEvent) {
 }
 
 .readme :deep(a) {
-  @apply underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg transition-colors duration-200;
+  @apply underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg text-sm rounded-md transition-colors duration-200 outline-transparent active:scale-[0.98];
 }
 .readme :deep(a:hover) {
-  @apply decoration-accent text-accent;
+  @apply decoration-accent;
 }
 .readme :deep(a:focus-visible) {
-  @apply decoration-accent text-accent;
+  @apply text-accent outline-2 outline-accent outline-offset-2;
 }
 
 .readme :deep(a[target='_blank']::after) {
   /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
   content: '__';
-  @apply inline i-carbon:launch rtl-flip ms-1 opacity-50;
+  @apply inline i-carbon:launch rtl-flip ms-0.5 opacity-50;
 }
 
-.readme :deep(a:focus-visible),
-.readme :deep(button:focus-visible) {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
+.readme :deep(a[target='_blank']:has(img)) {
+  /* Hide icon for links containing images */
+  &::after {
+    display: none;
+  }
 }
 
 .readme :deep(code) {

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

@@ -552,7 +552,7 @@ const showSkeleton = shallowRef(false)
 <template>
   <DevOnly>
     <ButtonBase
-      class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
+      class="fixed! bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
       classicon="i-simple-icons:skeleton"
       variant="primary"
       title="Toggle skeleton loader (development only)"