🐛 Fix underline styles not displaying correctly

Fixes #125

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Updated date is displayed even when it is the same as published date
 - Structured data on homepage unparsable by Google ([#113](https://github.com/jpanther/congo/issues/113))
+- Underline styles not displaying correctly in some browsers ([#125](https://github.com/jpanther/congo/issues/125))
 
 ## [2.0.4] - 2022-02-09
 

assets/css/compiled/main.css

@@ -1,6 +1,6 @@
 /*! Congo v2.0.4 | MIT License | https://github.com/jpanther/congo */
 
-/*! tailwindcss v3.0.19 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -481,7 +481,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1.2em;
 }
 
-.prose a {
+.prose :where(a):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-links);
   text-decoration: underline;
   font-weight: 500;
@@ -489,10 +489,10 @@ Ensure the default browser behavior of the `hidden` attribute.
           text-decoration-color: rgb(var(--color-primary-300));
 }
 
-:where(.prose a:hover):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral)) !important;
-  text-decoration: none !important;
-  background-color: rgb(var(--color-primary-600)) !important;
+.prose :where(a):not(:where([class~="not-prose"] *)):hover {
+  color: rgb(var(--color-neutral));
+  text-decoration: none;
+  background-color: rgb(var(--color-primary-600));
   border-radius: 0.09rem;
 }
 
@@ -2156,6 +2156,16 @@ body a, body button {
           text-decoration-line: none !important;
 }
 
+.decoration-primary-500 {
+  -webkit-text-decoration-color: rgb(var(--color-primary-500));
+          text-decoration-color: rgb(var(--color-primary-500));
+}
+
+.decoration-neutral-300 {
+  -webkit-text-decoration-color: rgb(var(--color-neutral-300));
+          text-decoration-color: rgb(var(--color-neutral-300));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2238,16 +2248,6 @@ body a, body button {
           text-decoration-line: underline;
 }
 
-.hover\:decoration-primary-500:hover {
-  -webkit-text-decoration-color: rgb(var(--color-primary-500));
-          text-decoration-color: rgb(var(--color-primary-500));
-}
-
-.hover\:decoration-neutral-300:hover {
-  -webkit-text-decoration-color: rgb(var(--color-neutral-300));
-          text-decoration-color: rgb(var(--color-neutral-300));
-}
-
 .hover\:decoration-primary-400:hover {
   -webkit-text-decoration-color: rgb(var(--color-primary-400));
           text-decoration-color: rgb(var(--color-primary-400));

layouts/_default/taxonomy.html

@@ -17,7 +17,7 @@
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
         <h2 class="flex items-center">
           <a
-            class="text-xl font-medium hover:underline hover:decoration-primary-500 hover:underline-offset-2"
+            class="text-xl font-medium hover:underline decoration-primary-500 hover:underline-offset-2"
             href="{{ .Page.RelPermalink }}"
             >{{ .Page.Title }}</a
           >

layouts/partials/article-link.html

@@ -2,7 +2,7 @@
   <h3 class="flex items-center mt-6 text-xl font-semibold">
     {{ with .Params.externalUrl }}
       <a
-        class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral"
+        class="decoration-primary-500 hover:underline hover:underline-offset-2 text-neutral-800 dark:text-neutral"
         href="{{ . }}"
         target="_blank"
         rel="external"
@@ -16,7 +16,7 @@
       </span>
     {{ else }}
       <a
-        class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral"
+        class="decoration-primary-500 hover:underline hover:underline-offset-2 text-neutral-800 dark:text-neutral"
         href="{{ .RelPermalink }}"
         >{{ .Title | emojify }}</a
       >

layouts/partials/breadcrumbs.html

@@ -9,7 +9,7 @@
   {{ end }}
   <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
     <a
-      class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600"
+      class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
       href="{{ .p1.RelPermalink }}"
       >{{ if .p1.Title }}
         {{- .p1.Title -}}

layouts/partials/footer.html

@@ -6,7 +6,7 @@
         {{ range .Site.Menus.footer }}
           <li class="mb-1 sm:mb-0 sm:mr-7 sm:last:mr-0">
             <a
-              class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
+              class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"
               title="{{ .Title }}"
               >{{ .Name | markdownify | emojify }}</a

layouts/partials/header.html

@@ -18,7 +18,7 @@
       {{ end }}
     {{ else }}
       <a
-        class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
+        class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
         rel="me"
         href="{{ "/" | relLangURL }}"
         >{{ .Site.Title | markdownify | emojify }}</a
@@ -35,7 +35,7 @@
             class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
           >
             <a
-              class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
+              class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"
               title="{{ .Title }}"
               >{{ .Name | markdownify | emojify }}</a

tailwind.config.js

@@ -98,9 +98,9 @@ module.exports = {
               textDecorationColor: theme("colors.primary.300"),
               fontWeight: "500",
               "&:hover": {
-                color: `${theme("colors.neutral.DEFAULT")} !important`,
-                textDecoration: "none !important",
-                backgroundColor: `${theme("colors.primary.600")} !important`,
+                color: theme("colors.neutral.DEFAULT"),
+                textDecoration: "none",
+                backgroundColor: theme("colors.primary.600"),
                 borderRadius: "0.09rem",
               },
             },