chore: fix cta link hover issues (#153)

Author: Anca2022

public/img/icon-link-arrow.svg

@@ -162,20 +162,23 @@ const { page } = Astro.props;
     border-radius: var(--border-radius);
     font-size: var(--step--1);
     background-image: var(--color-white);
+    text-decoration: none;
   }
 
-  .cta__blog {
+  .cta__blog p {
+    flex: none;
     text-decoration-color: transparent;
+    text-decoration-line: underline;
     transition: text-decoration-color 300ms ease-in-out;
   }
 
   .cta__blog:hover {
-    color: currentColor;
-    text-decoration-color: currentColor;
+    color: inherit;
   }
 
-  .cta__blog p {
-    flex: none;
+  .cta__blog:hover p {
+    color: currentColor;
+    text-decoration-color: currentColor;
   }
 
   .cta__blog img {

src/pages/blog/[...page].astro

@@ -149,20 +149,24 @@ const esEntries = await getCollection("blog", ({ data }) => {
     border-radius: var(--border-radius);
     font-size: var(--step--1);
     background-image: var(--color-white);
+    text-decoration: none;
   }
 
-  .cta__blog {
+  .cta__blog p {
+    flex: none;
     text-decoration-color: transparent;
+    text-decoration-line: underline;
     transition: text-decoration-color 300ms ease-in-out;
   }
 
   .cta__blog:hover {
-    color: currentColor;
-    text-decoration-color: currentColor;
+    color: inherit;
   }
 
-  .cta__blog p {
-    flex: none;
+  .cta__blog:hover p {
+    color: currentColor;
+    text-decoration-color: currentColor;
+    text-decoration-line: underline;
   }
 
   .cta__blog img {

src/pages/blog/es.astro

@@ -4,6 +4,7 @@ import InterledgerIcon from "../components/logos/InterledgerIcon.astro";
 import OpenPaymentsIcon from "../components/logos/OpenPaymentsIcon.astro";
 import RafikiIcon from "../components/logos/RafikiIcon.astro";
 import ExternalIcon from "../../public/img/icon-external.svg";
+import LinkArrow from "../../public/img/icon-link-arrow.svg";
 ---
 
 <BaseLayout title="Developers">
@@ -22,13 +23,14 @@ import ExternalIcon from "../../public/img/icon-external.svg";
             <a
               class="btn hero__btn"
               href="/developers/get-involved"
-              data-umami-event="Devs page link - Get involved">Get involved</a
+              data-umami-event="Devs page link - Get involved"
+              ><span>Get involved</span> <LinkArrow /></a
             >
             <a
               href="https://github.com/interledger"
               target="_blank"
               rel="noopener noreferrer"
-              >Contribute on Github
+              ><span>Contribute on Github</span>
               <ExternalIcon class="external" />
             </a>
           </div>
@@ -62,7 +64,8 @@ import ExternalIcon from "../../public/img/icon-external.svg";
               data-umami-event="Devs page link - GitHub"
               target="_blank"
               rel="noopener noreferrer"
-              ><OpenPaymentsIcon /> Open Payments Repo
+              ><OpenPaymentsIcon />
+              Open Payments Repo
               <ExternalIcon class="external" />
             </a>
           </h2>
@@ -80,7 +83,8 @@ import ExternalIcon from "../../public/img/icon-external.svg";
               data-umami-event="Devs page link - Rafiki"
               target="_blank"
               rel="noopener noreferrer"
-              ><RafikiIcon /> Rafiki Repo
+              ><RafikiIcon />
+              Rafiki Repo
               <ExternalIcon class="external" />
             </a>
           </h2>
@@ -98,7 +102,8 @@ import ExternalIcon from "../../public/img/icon-external.svg";
               data-umami-event="Devs page link - RFCs"
               target="_blank"
               rel="noopener noreferrer"
-              ><InterledgerIcon /> Specifications Repo
+              ><InterledgerIcon />
+              Specifications Repo
               <ExternalIcon class="external" />
             </a>
           </h2>
@@ -119,7 +124,8 @@ import ExternalIcon from "../../public/img/icon-external.svg";
               data-umami-event="Devs page link - Testnet"
               target="_blank"
               rel="noopener noreferrer"
-              ><InterledgerIcon /> Test Network Repo
+              ><InterledgerIcon />
+              Test Network Repo
               <ExternalIcon class="external" />
             </a>
           </h2>
@@ -152,7 +158,8 @@ import ExternalIcon from "../../public/img/icon-external.svg";
           <a
             class="btn card__btn"
             href="/developers/blog"
-            data-umami-event="Devs page link - Blog">Read our blog</a
+            data-umami-event="Devs page link - Blog"
+            >Read our blog<LinkArrow /></a
           >
         </div>
       </div>
@@ -203,27 +210,32 @@ import ExternalIcon from "../../public/img/icon-external.svg";
     display: inline-flex;
     align-items: center;
     gap: var(--space-2xs);
-    text-decoration-color: transparent;
-    text-underline-offset: 4px;
-    transition: text-decoration-color ease-in-out 200ms;
+    text-decoration: none;
   }
 
-  .btn::after {
-    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11.92 5.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.004 1.004 0 0 0-1.42 1.42L8.59 5H1a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>');
-    flex: none;
+  .btn svg {
     width: 0.6em;
   }
 
   a {
+    text-underline-offset: 4px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  a span {
+    text-decoration-line: underline;
     text-decoration-color: transparent;
     text-underline-offset: 4px;
     transition: text-decoration-color ease-in-out 200ms;
-    cursor: pointer;
   }
 
   a:hover {
     color: var(--color-white);
-    text-decoration: underline;
+  }
+
+  a:hover span {
+    text-decoration-color: inherit;
   }
 
   .external {
@@ -263,12 +275,13 @@ import ExternalIcon from "../../public/img/icon-external.svg";
     padding: var(--space-xs) var(--space-s);
   }
 
-  .hero__btn:hover {
-    text-decoration-color: var(--color-primary);
+  .hero__btn span {
+    text-decoration-line: underline;
+    text-decoration-color: transparent;
   }
 
-  .hero__btn::after {
-    filter: var(--filter-primary);
+  .hero__btn:hover {
+    color: var(--color-primary);
   }
 
   .image-wrapper {
@@ -356,12 +369,4 @@ import ExternalIcon from "../../public/img/icon-external.svg";
     margin-block-start: var(--space-xs);
     padding: var(--space-2xs) var(--space-xs);
   }
-
-  .card__btn:hover {
-    color: var(--color-white);
-  }
-
-  .card__btn::after {
-    filter: var(--filter-white);
-  }
 </style>

src/pages/index.astro

@@ -79,10 +79,6 @@
   --color-primary: oklch(51.54% 0.088 194.77);
   --color-primary-bg-fallback: rgba(7, 121, 114, 0.1);
   --color-primary-bg: oklch(51.95% 0.089 187.7 / 0.1);
-  --filter-primary: invert(18%) sepia(85%) saturate(4735%) hue-rotate(172deg)
-    brightness(93%) contrast(101%);
-  --filter-white: invert(100%) sepia(0%) saturate(2%) hue-rotate(110deg)
-    brightness(108%) contrast(101%);
 
   --color-header-bg: var(--color-white);
   --color-header-accent: #eee;