From 8678c477bf888b9e7ead332cb9b750bc63de496f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Sat, 15 Mar 2025 10:12:11 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix:=20fix=20external=20link=20i?= =?UTF-8?q?con=20breaking=20word=20wrapping=20(#498)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sass/parts/_misc.scss | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 36f027f..0580780 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -85,30 +85,21 @@ a { // External link styles with `external_links_class = "external"`. main { --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 5h-6v14h14v-6'/%3E%3Cpath d='M13 11l7 -7'/%3E%3Cpath d='M21 3h-6M21 3v6'/%3E%3C/g%3E%3C/svg%3E"); - a.external:not(:has(img, svg, video, picture, figure)) { - display: inline-block; - padding-inline-end: 0.9em; - } a.external:not(:has(img, svg, video, picture, figure))::after { - -webkit-mask-image: var(--external-link-icon); - -webkit-mask-size: 100% 100%; display: inline-block; - position: absolute; - top: 50%; - transform: translateY(-50%); - mask-image: var(--external-link-icon); - mask-size: 100% 100%; - margin-inline-start: 0.2em; - inset-inline-end: 0; + vertical-align: -0.05em; + margin-inline-start: 0.1em; background-color: currentColor; width: 0.8em; height: 0.8em; content: ''; + -webkit-mask-image: var(--external-link-icon); + -webkit-mask-size: 100% 100%; } &:dir(rtl) a.external:not(:has(img, svg, video, picture, figure))::after { - transform: translateY(-50%) rotate(-90deg); + transform: rotate(-90deg); } .meta a.external:not(:has(img, svg, video, picture, figure))::after {