diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-14 18:02:36 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-14 18:06:48 +0100 |
| commit | a93b026af98ef5d20f242633871a2b222eb090b5 (patch) | |
| tree | e06b39f9294682423ee712173c5aa8731eaacc08 /src/styles | |
| parent | 03c5ba6791dcf7e097f14246af61d107cdadaeff (diff) | |
fix: make links pseudo elements consistent between browsers
On Chromium the pseudo elements (like external links icon) was not
displayed correctly.
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/base/_typography.scss | 28 |
1 files changed, 13 insertions, 15 deletions
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index 5bf8eea..0aea717 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -157,37 +157,35 @@ a { text-decoration-thickness: 18%; } - &[hreflang], &.external { - grid-template-columns: minmax(0, 1fr) fun.convert-px(50); - &::after { - display: inline-flex; - flex-flow: row nowrap; - width: fun.convert-px(14); - margin-right: 0.5ex; - font-size: var(--font-size-sm); + display: inline-block; + content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); } - } - &.external { - &::after { - content: "\0000a0"url(fun.encode-svg('<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); + &:focus:not(:active)::after { + content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); } } &[hreflang] { &::after { + display: inline-block; content: "\0000a0["attr(hreflang) "]"; - text-decoration: none; + font-size: var(--font-size-sm); } &.external { &::after { content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( - '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' + )); + } + + &:focus:not(:active)::after { + content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( + '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' )); - margin-right: 4.5ex; } } } |