From 4c10e3e5900d834b071f89024e6562e988d93b95 Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Thu, 15 Sep 2022 08:33:52 +0000 Subject: [PATCH] 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 --- .../themes/twentynineteen/sass/elements/_elements.scss | 1 + .../themes/twentynineteen/sass/navigation/_links.scss | 1 + .../themes/twentynineteen/sass/site/primary/_comments.scss | 1 + .../twentynineteen/sass/site/primary/_posts-and-pages.scss | 1 + .../themes/twentynineteen/sass/site/secondary/_widgets.scss | 1 + .../themes/twentynineteen/sass/typography/_copy.scss | 1 + src/wp-content/themes/twentynineteen/style-rtl.css | 6 ++++++ src/wp-content/themes/twentynineteen/style.css | 6 ++++++ 8 files changed, 18 insertions(+) diff --git a/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss b/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss index b1fad05838..edc11cdf91 100644 --- 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 index cbee4579d6..ed801e7764 100644 --- 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 index dc7b80c15b..fa4000e304 100644 --- 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 index ce1c6f2909..a940d218dd 100644 --- 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 index 9447d42888..968e1774bc 100644 --- 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 index bfbd0feb46..37e08dfd2d 100644 --- 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 index 29f0119765..c18f66b66c 100644 --- 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 index 9d68322d74..f4c87a3b07 100644 --- 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 {