From bcba7405ef69d79c817edf8c248c66ec810a1eff Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Thu, 27 Jun 2024 18:09:38 +0300
Subject: [PATCH] Make text underlines uniform across browsers, scale them with
 the text

---
 sass/_external.scss   | 4 ++--
 sass/_typography.scss | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/sass/_external.scss b/sass/_external.scss
index a35df5d..001943e 100644
--- a/sass/_external.scss
+++ b/sass/_external.scss
@@ -8,8 +8,8 @@
 	mask-size: cover;
 	margin-left: 0.25rem;
 	background-color: var(--primary-color);
-	width: 0.75rem;
-	height: 0.75rem;
+	width: 0.75em;
+	height: 0.75em;
 	content: "";
 
 	:root[dir="rtl"] & {
diff --git a/sass/_typography.scss b/sass/_typography.scss
index 78a2813..5d31633 100644
--- a/sass/_typography.scss
+++ b/sass/_typography.scss
@@ -30,9 +30,10 @@ small {
 }
 
 abbr[title] {
-	-webkit-text-decoration: underline dotted;
 	cursor: help;
-	text-decoration: underline dotted;
+	text-decoration: underline;
+	text-decoration-style: dotted;
+	text-decoration-thickness: max(1px, 0.0625em);
 }
 
 figcaption {
@@ -84,10 +85,10 @@ kbd {
 a {
 	color: var(--primary-color);
 	font-weight: bold;
+	text-decoration-thickness: max(1px, 0.0625em);
 
 	&:hover {
-		-webkit-text-decoration: underline wavy;
-		text-decoration: underline wavy;
+		text-decoration-style: wavy;
 	}
 }