From 01bad427e5d76d03c6b49a363a1e6d2c4e1b0300 Mon Sep 17 00:00:00 2001 From: Charlie Denton Date: Mon, 12 Jan 2026 10:05:08 +0000 Subject: [PATCH] Rework external link marker style This now uses an SVG image to use a more standard icon for the external link. This approach was informed by https://stackoverflow.com/a/66093928/400691 --- docs/static/css/theme.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/static/css/theme.css b/docs/static/css/theme.css index f873d7d..fc4b1e2 100644 --- a/docs/static/css/theme.css +++ b/docs/static/css/theme.css @@ -13,9 +13,17 @@ /* External link icon */ .md-content a[href^="http"]:after { - content: "↗"; - font-size: 0.7em; - opacity: 0.7; - margin-left: 0.1em; + --link-icon-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E"); + + width: .5rem; + height: .5rem; vertical-align: super; + + display: inline-block; + background-color: currentColor; + content: ''; + -webkit-mask-image: var(--link-icon-svg); + mask-image: var(--link-icon-svg); + -webkit-mask-size: cover; + mask-size: cover; }