Fix anchor style.

Author: nikoshell

src/components/button-link/button-link.astro

@@ -22,7 +22,7 @@ const resolvedIsExternal =
 ---
 
 <a
-  class={`font-bold text-lg px-4 py-4 bg-button rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose
+  class={`button-link font-bold text-lg px-4 py-4 bg-button rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose
     ${secondary || disabled ? "bg-primary text-white hover:bg-primary-hover" : "text-text-inverted"}
     ${secondary ? "text-text" : ""}
     ${className || ""}

src/components/card/card.astro

@@ -29,7 +29,7 @@ const { title, subtitle, url, image } = Astro.props;
     </div>
   </a>
   <div class="flex items-center flex-col flex-grow mb-2">
-    <a href={url} class="block hover:underline">
+    <a href={url} class="button-link block hover:underline">
       <h3 >{title}</h3>
     </a>
     <slot />

src/components/ui/Button.astro

@@ -22,7 +22,7 @@ const {
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
 
-const baseClasses = "font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
+const baseClasses = "button-link font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
 const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
 const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent";

src/layouts/Layout.astro

@@ -54,9 +54,13 @@ const externalDomain = new URL(Astro.site || "").hostname;
     max-width: 1150px;
   }
 
-  main a[href^="http"]:not([href*="var(--externalDomain)"]):not(:has(img))::after {
-    content: "↗";
+  main a[href^="http"]:not([href*="var(--externalDomain)"]):not(.button-link):not(:has(img))::after {
     font-size: 0.8em;
+    content: " ↗";
+    display: inline-block;
+    white-space: nowrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
   }
 </style>