deepState/tabi-lean
3
0
Fork 0
forked from deepStateMirrors/tabi
Code Issues 1 Pull requests Activity

💄 fix: fix external link icon breaking word wrapping (#498)

Browse source
This commit is contained in:
Óscar 2025-03-15 10:12:11 +01:00 • committed by GitHub
parent e11186a844
commit 8678c477bf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

19
sass/parts/_misc.scss
View file

@ -85,30 +85,21 @@ a {
// External link styles with `external_links_class = "external"`. // External link styles with `external_links_class = "external"`.
main { 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"); --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 { 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; display: inline-block;
position: absolute; vertical-align: -0.05em;
top: 50%; margin-inline-start: 0.1em;
transform: translateY(-50%);
mask-image: var(--external-link-icon);
mask-size: 100% 100%;
margin-inline-start: 0.2em;
inset-inline-end: 0;
background-color: currentColor; background-color: currentColor;
width: 0.8em; width: 0.8em;
height: 0.8em; height: 0.8em;
content: ''; 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 { &: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 { .meta a.external:not(:has(img, svg, video, picture, figure))::after {