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 <[email protected]>
inclusive-design · Apr 5, 2024 · 79a7db8 · 79a7db8
1 parent daaa8f2
commit 79a7db8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -86,7 +86,8 @@
     margin-block-end: rem(8);
 }
 
-.footer .social a {
+.footer .social a,
+.footer .contact a {
     text-decoration: none;
 }