Twenty Nineteen: Define underline thickness for links.

This changeset adds `text-decoration-thickness: 2px;` to all underlined link to ensure that underline thickness stay consistent across browsers. This fixes an issue where the underline style on links using the Hoefler Text font was too thin in Firefox. Props allancole, sabernhardt, danfarrow, audrasjb, neychok, multidots1896, maartenj. Fixes #45925. git-svn-id: https://develop.svn.wordpress.org/trunk@54171 602fd350-edb4-49c9-b593-d223f7449a82
WordPress · Sep 15, 2022 · 4c10e3e · 4c10e3e
1 parent 39617d8
commit 4c10e3e
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 0 deletions.
diff --git a/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss b/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss
@@ -40,6 +40,7 @@ a:focus {
 	outline: thin;
 	outline-style: dotted;
 	text-decoration: underline;
+	text-decoration-thickness: 2px;
 }
 
 h1,

diff --git a/src/wp-content/themes/twentynineteen/sass/navigation/_links.scss b/src/wp-content/themes/twentynineteen/sass/navigation/_links.scss
@@ -17,5 +17,6 @@ a {
 	&:focus {
 		outline: thin dotted;
 		text-decoration: underline;
+		text-decoration-thickness: 2px;
 	}
 }
diff --git a/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss b/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss
@@ -323,6 +323,7 @@
 
 		a {
 			text-decoration: underline;
+			text-decoration-thickness: 2px;
 
 			&:hover {
 				text-decoration: none;

diff --git a/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss b/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss
@@ -212,6 +212,7 @@
 
 		a {
 			text-decoration: underline;
+			text-decoration-thickness: 2px;
 
 			&.button,
 			&:hover {

diff --git a/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss b/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss
@@ -81,6 +81,7 @@
 
 	a {
 		text-decoration: underline;
+		text-decoration-thickness: 2px;
 	}
 
 	.wp-calendar-table {

diff --git a/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss b/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss
@@ -58,5 +58,6 @@ a {
 
 	&:focus {
 		text-decoration: underline;
+		text-decoration-thickness: 2px;
 	}
 }
diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css
@@ -2471,6 +2471,7 @@ a:hover {
 
 a:focus {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 /* Elements */
@@ -2512,6 +2513,7 @@ a:focus {
   outline: thin;
   outline-style: dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 h1,
@@ -2760,6 +2762,7 @@ a:active {
 a:focus {
   outline: thin dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 /*--------------------------------------------------------------
@@ -4423,6 +4426,7 @@ body.page .main-navigation {
 
 .entry .entry-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 .entry .entry-content a.button, .entry .entry-content a:hover {
@@ -4900,6 +4904,7 @@ body.page .main-navigation {
 
 .comment .comment-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 .comment .comment-content a:hover {
@@ -5225,6 +5230,7 @@ body.page .main-navigation {
 
 .widget_calendar .calendar_wrap a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 .widget_calendar .calendar_wrap .wp-calendar-table {

diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css
@@ -2471,6 +2471,7 @@ a:hover {
 
 a:focus {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 /* Elements */
@@ -2512,6 +2513,7 @@ a:focus {
   outline: thin;
   outline-style: dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 h1,
@@ -2760,6 +2762,7 @@ a:active {
 a:focus {
   outline: thin dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 /*--------------------------------------------------------------
@@ -4429,6 +4432,7 @@ body.page .main-navigation {
 
 .entry .entry-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 .entry .entry-content a.button, .entry .entry-content a:hover {
@@ -4906,6 +4910,7 @@ body.page .main-navigation {
 
 .comment .comment-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 .comment .comment-content a:hover {
@@ -5231,6 +5236,7 @@ body.page .main-navigation {
 
 .widget_calendar .calendar_wrap a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
 .widget_calendar .calendar_wrap .wp-calendar-table {
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,6 +81,7 @@ @@
     	a {
     		text-decoration: underline;
+    		text-decoration-thickness: 2px;
     	}
     	.wp-calendar-table {
@@ Expand Down @@