From 79a7db8657b0f54de7f2e434e42d755625ef8c52 Mon Sep 17 00:00:00 2001
From: Daniel <chosww@gmail.com>
Date: Fri, 5 Apr 2024 10:55:01 -0400
Subject: [PATCH] fix: update link styles throughout the site (#776)

* fix: update link styles throughout the site

* fix: use class instead of id

* fix: use class instead of id

---------

Co-authored-by: Ned Zimmerman <ned@bight.dev>
---
 src/_includes/partials/components/pagination.njk | 6 +++---
 src/assets/styles/base/_base.scss                | 8 +++-----
 src/assets/styles/components/_pagination.scss    | 4 ++++
 src/assets/styles/layout/_footer.scss            | 3 ++-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/_includes/partials/components/pagination.njk b/src/_includes/partials/components/pagination.njk
index 6378fcf1..f4c2eb97 100644
--- a/src/_includes/partials/components/pagination.njk
+++ b/src/_includes/partials/components/pagination.njk
@@ -2,13 +2,13 @@
     <h2 id="pagination" class="visually-hidden">news page navigation</h2>
     <ul class="container">
     {%- if pagination.href.previous %}
-        <li><a href="{{ pagination.href.previous }}">{% include 'svg/previous.svg' %}<span class="visually-hidden">previous</span></a></li>
+        <li><a class="pagination-link" href="{{ pagination.href.previous }}">{% include 'svg/previous.svg' %}<span class="visually-hidden">previous</span></a></li>
     {%- endif %}
     {%- for pageEntry in pagination.pages %}
-        <li><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}>{{ loop.index }}</a></li>
+        <li><a class="pagination-link" href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}>{{ loop.index }}</a></li>
     {%- endfor %}
     {%- if pagination.href.next %}
-        <li><a href="{{ pagination.href.next }}"><span class="visually-hidden">next</span>{% include 'svg/next.svg' %}</a></li>
+        <li><a class="pagination-link" href="{{ pagination.href.next }}"><span class="visually-hidden">next</span>{% include 'svg/next.svg' %}</a></li>
     {%- endif %}
     </ul>
 </nav>
diff --git a/src/assets/styles/base/_base.scss b/src/assets/styles/base/_base.scss
index d30d5120..56bbb74d 100755
--- a/src/assets/styles/base/_base.scss
+++ b/src/assets/styles/base/_base.scss
@@ -26,6 +26,7 @@ a {
     color: var(--fl-linkColor);
     font-family: var(--fl-font-family, var(--ff-display));
     text-decoration: underline;
+    text-underline-offset: 0.3em;
 }
 
 main,
@@ -44,7 +45,8 @@ footer {
     a:hover {
         background: var(--fl-linkColor, var(--accent, var(--yellow-500)));
         color: var(--fl-bgColor, currentColor);
-        outline-color: var(--fl-linkColor, var(--accent, var(--yellow-500)));
+        text-decoration: none;
+        text-underline-offset: unset;
     }
 
     a:focus {
@@ -83,10 +85,6 @@ a[hreflang] {
     margin-block-start: var(--step-2);
 }
 
-.content a:visited {
-    text-decoration-color: var(--fl-linkColor, var(--yellow-500));
-}
-
 main h1,
 main h2,
 main h3,
diff --git a/src/assets/styles/components/_pagination.scss b/src/assets/styles/components/_pagination.scss
index 1bdb9474..7a50e557 100644
--- a/src/assets/styles/components/_pagination.scss
+++ b/src/assets/styles/components/_pagination.scss
@@ -58,3 +58,7 @@
     block-size: rem(24);
     inline-size: rem(24);
 }
+
+a.pagination-link {
+    text-decoration: none;
+}
diff --git a/src/assets/styles/layout/_footer.scss b/src/assets/styles/layout/_footer.scss
index 90be865e..04979872 100755
--- a/src/assets/styles/layout/_footer.scss
+++ b/src/assets/styles/layout/_footer.scss
@@ -86,7 +86,8 @@
     margin-block-end: rem(8);
 }
 
-.footer .social a {
+.footer .social a,
+.footer .contact a {
     text-decoration: none;
 }