Changeset 54171

Timestamp:

09/15/2022 08:33:52 AM (2 years ago)

Author:

audrasjb

Message:

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.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• sass/elements/_elements.scss (modified) (1 diff)
• sass/navigation/_links.scss (modified) (1 diff)
• sass/site/primary/_comments.scss (modified) (1 diff)
• sass/site/primary/_posts-and-pages.scss (modified) (1 diff)
• sass/site/secondary/_widgets.scss (modified) (1 diff)
• sass/typography/_copy.scss (modified) (1 diff)
• style-rtl.css (modified) (6 diffs)
• style.css (modified) (6 diffs)

trunk/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss

@@ -41 +41 @@
     outline-style: dotted;
     text-decoration: underline;
+    text-decoration-thickness: 2px;
 }
 

trunk/src/wp-content/themes/twentynineteen/sass/navigation/_links.scss

@@ -18 +18 @@
         outline: thin dotted;
         text-decoration: underline;
+        text-decoration-thickness: 2px;
     }
 }

trunk/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

@@ -324 +324 @@
         a {
             text-decoration: underline;
+            text-decoration-thickness: 2px;
 
             &:hover {

trunk/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss

@@ -213 +213 @@
         a {
             text-decoration: underline;
+            text-decoration-thickness: 2px;
 
             &.button,

trunk/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss

@@ -82 +82 @@
     a {
         text-decoration: underline;
+        text-decoration-thickness: 2px;
     }
 

trunk/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss

@@ -59 +59 @@
     &:focus {
         text-decoration: underline;
+        text-decoration-thickness: 2px;
     }
 }

trunk/src/wp-content/themes/twentynineteen/style-rtl.css

@@ -2472 +2472 @@
 a:focus {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -2513 +2514 @@
   outline-style: dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -2761 +2763 @@
   outline: thin dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -4424 +4427 @@
 .entry .entry-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -4901 +4905 @@
 .comment .comment-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -5226 +5231 @@
 .widget_calendar .calendar_wrap a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 

trunk/src/wp-content/themes/twentynineteen/style.css

@@ -2472 +2472 @@
 a:focus {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -2513 +2514 @@
   outline-style: dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -2761 +2763 @@
   outline: thin dotted;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -4430 +4433 @@
 .entry .entry-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -4907 +4911 @@
 .comment .comment-content a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
@@ -5232 +5237 @@
 .widget_calendar .calendar_wrap a {
   text-decoration: underline;
+  text-decoration-thickness: 2px;
 }