Split out link underline thickness for Safari compatibility

Safari doesn’t support specifying text-decoration-thickness in the text-decoration shorthand: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#browser_compatibility

Author: acusti

src/css/custom.css

@@ -75,6 +75,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 a {
   --ifm-link-color: var(--ifm-color-content);
   text-decoration-skip-ink: none;
+  text-decoration-thickness: var(--ifm-link-decoration-thickness);
 }
 
 a:hover,
@@ -86,8 +87,9 @@ a:hover,
 }
 
 article a {
-  --ifm-link-decoration: underline 3px solid var(--ifm-color-primary);
-  --ifm-link-hover-decoration: underline 3px solid var(--ifm-color-primary);
+  --ifm-link-decoration: underline solid var(--ifm-color-primary);
+  --ifm-link-decoration-thickness: 3px;
+  --ifm-link-hover-decoration: underline solid var(--ifm-color-primary);
 }
 
 article div {
@@ -102,7 +104,8 @@ article div {
 .navbar__link:hover,
 .navbar__brand:hover {
   color: inherit;
-  text-decoration: underline 3px solid var(--ifm-color-primary) !important;
+  text-decoration: underline solid var(--ifm-color-primary) !important;
+  text-decoration-thickness: 3px !important;
 }
 
 .navbar__title {
@@ -123,4 +126,4 @@ code {
   padding: 0 0.3rem;
   margin: 0 0.1rem;
   vertical-align: baseline;
-}
+}