From ea06bae3ad73a8e16fc46b8df1e9711be3d9d526 Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Wed, 1 Jan 2025 19:37:18 -0500 Subject: [PATCH 1/5] Re-enable external link icons --- app/root.css | 17 +++++++++++++++++ public/assets/Icon_External_Link.svg | 5 +++++ 2 files changed, 22 insertions(+) create mode 100644 public/assets/Icon_External_Link.svg diff --git a/app/root.css b/app/root.css index 652e2d58..628ded24 100644 --- a/app/root.css +++ b/app/root.css @@ -640,6 +640,23 @@ a:not(:hover, :focus-visible) { text-decoration: none; } +/* Only show external icon for links that have both target="_blank" AND start with http/https */ +a[target='_blank'][href^="http"]:not(.icon-link, .transparent-link):after { + content: ' '; + display: inline-block; + vertical-align: top; + width: 12px; + height: 12px; + margin-left: 2px; + margin-top: 8px; + /* Support both webkit and standard mask syntax */ + -webkit-mask: url('/assets/Icon_External_Link.svg') no-repeat center center; + mask: url('/assets/Icon_External_Link.svg') no-repeat center center; + -webkit-mask-size: cover; + mask-size: cover; + background-color: currentColor; +} + hr { border: 1px solid var(--colors-cool-grey-200); border-bottom: 0; diff --git a/public/assets/Icon_External_Link.svg b/public/assets/Icon_External_Link.svg new file mode 100644 index 00000000..f727beee --- /dev/null +++ b/public/assets/Icon_External_Link.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From e5bdc309884262ebfda069bd2523ebe6ec6e6280 Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Wed, 1 Jan 2025 19:56:44 -0500 Subject: [PATCH 2/5] Update icon position and only apply to text --- app/root.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/app/root.css b/app/root.css index 628ded24..38f3f3a9 100644 --- a/app/root.css +++ b/app/root.css @@ -640,16 +640,13 @@ a:not(:hover, :focus-visible) { text-decoration: none; } -/* Only show external icon for links that have both target="_blank" AND start with http/https */ -a[target='_blank'][href^="http"]:not(.icon-link, .transparent-link):after { +.contents a[target='_blank'][href^="http"]:not(.icon-link, .transparent-link):after { content: ' '; display: inline-block; - vertical-align: top; - width: 12px; - height: 12px; - margin-left: 2px; - margin-top: 8px; - /* Support both webkit and standard mask syntax */ + width: 10px; + height: 10px; + margin-left: 1px; + margin-bottom: 6px; -webkit-mask: url('/assets/Icon_External_Link.svg') no-repeat center center; mask: url('/assets/Icon_External_Link.svg') no-repeat center center; -webkit-mask-size: cover; From e67f7f58eec4df04560884d3266e26a590375dda Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Wed, 1 Jan 2025 20:26:01 -0500 Subject: [PATCH 3/5] Lint --- app/root.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/root.css b/app/root.css index 38f3f3a9..b838e0af 100644 --- a/app/root.css +++ b/app/root.css @@ -640,7 +640,7 @@ a:not(:hover, :focus-visible) { text-decoration: none; } -.contents a[target='_blank'][href^="http"]:not(.icon-link, .transparent-link):after { +.contents a[target='_blank'][href^='http']:not(.icon-link, .transparent-link):after { content: ' '; display: inline-block; width: 10px; From 1fe4251e00122313e8c9a860b2bcc45533187588 Mon Sep 17 00:00:00 2001 From: Peter Hozak Date: Thu, 2 Jan 2025 09:03:07 +0100 Subject: [PATCH 4/5] keep icon on the same line --- app/root.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/app/root.css b/app/root.css index b838e0af..125ef01d 100644 --- a/app/root.css +++ b/app/root.css @@ -640,13 +640,17 @@ a:not(:hover, :focus-visible) { text-decoration: none; } +.contents a[target='_blank'][href^='http']:not(.icon-link, .transparent-link) { + margin-right: 12px; +} + .contents a[target='_blank'][href^='http']:not(.icon-link, .transparent-link):after { - content: ' '; - display: inline-block; + content: ''; + position: absolute; width: 10px; height: 10px; margin-left: 1px; - margin-bottom: 6px; + margin-top: 8px; -webkit-mask: url('/assets/Icon_External_Link.svg') no-repeat center center; mask: url('/assets/Icon_External_Link.svg') no-repeat center center; -webkit-mask-size: cover; @@ -654,6 +658,11 @@ a:not(:hover, :focus-visible) { background-color: currentColor; } +sup { + /* external link icon above looks best when line-height does not change on lines with footnotes */ + line-height: 1; +} + hr { border: 1px solid var(--colors-cool-grey-200); border-bottom: 0; From 1edee79c337a5665f8006c2b1ed015d7764e6b8f Mon Sep 17 00:00:00 2001 From: Peter Hozak Date: Thu, 2 Jan 2025 17:24:58 +0100 Subject: [PATCH 5/5] different workaround that also works in Chrome (while not breaking in Firefox and Safari) --- app/root.css | 17 ++--------------- public/assets/Icon_External_Link.svg | 2 +- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/app/root.css b/app/root.css index 125ef01d..6908da70 100644 --- a/app/root.css +++ b/app/root.css @@ -641,21 +641,8 @@ a:not(:hover, :focus-visible) { } .contents a[target='_blank'][href^='http']:not(.icon-link, .transparent-link) { - margin-right: 12px; -} - -.contents a[target='_blank'][href^='http']:not(.icon-link, .transparent-link):after { - content: ''; - position: absolute; - width: 10px; - height: 10px; - margin-left: 1px; - margin-top: 8px; - -webkit-mask: url('/assets/Icon_External_Link.svg') no-repeat center center; - mask: url('/assets/Icon_External_Link.svg') no-repeat center center; - -webkit-mask-size: cover; - mask-size: cover; - background-color: currentColor; + padding-right: 12px; + background: url('/assets/Icon_External_Link.svg') no-repeat top 3px right 1px / 10px 10px; } sup { diff --git a/public/assets/Icon_External_Link.svg b/public/assets/Icon_External_Link.svg index f727beee..00558966 100644 --- a/public/assets/Icon_External_Link.svg +++ b/public/assets/Icon_External_Link.svg @@ -1,5 +1,5 @@ - + \ No newline at end of file