enhance(l10n): localize "(en-US)" indicator (#10996)

Links in other locales that point to the English locale often
have an indicator "(en-US)", but this is rather technical and not
ideal from a user experience point of view.

This PR replaces the indicator by a localized one, added via CSS.

---------

Co-authored-by: A1lo <[email protected]>

Author: caugner

Diff for: build/flaws/broken-links.ts

@@ -54,7 +54,6 @@ function mutateLink(
     // As we still suggest the translated version even if we only
     // have an English (US) version.
     $element.attr("href", enUSFallback);
-    $element.append(` <small>(${DEFAULT_LOCALE})<small>`);
     $element.addClass("only-in-en-us");
     $element.attr("title", "Currently only available in English (US)");
   } else if (suggestion) {

Diff for: client/src/document/index.scss

@@ -942,3 +942,43 @@ kbd {
     opacity: 0.4;
   }
 }
+
+html a.only-in-en-us:after {
+  content: "(en-US)";
+  font-size: smaller;
+  vertical-align: super;
+}
+
+html[lang="es"] a.only-in-en-us:after {
+  content: "(inglés)";
+}
+
+html[lang="fr"] a.only-in-en-us:after {
+  content: "(angl.)";
+}
+
+html[lang="ja"] a.only-in-en-us:after {
+  content: "(英語)";
+}
+
+html[lang="ko"] a.only-in-en-us:after {
+  content: "(영어)";
+}
+
+html[lang="ru"] a.only-in-en-us:after {
+  content: "(англ.)";
+}
+
+html[lang="pt-BR"] a.only-in-en-us:after {
+  content: "(inglês)";
+}
+
+html[lang="zh-CN"] a.only-in-en-us:after {
+  content: "（英语）";
+  vertical-align: baseline;
+}
+
+html[lang="zh-TW"] a.only-in-en-us:after {
+  content: "（英語）";
+  vertical-align: baseline;
+}

Diff for: kumascript/src/api/web.ts

@@ -155,7 +155,7 @@ const web = {
         return (
           '<a class="only-in-en-us" ' +
           'title="Currently only available in English (US)" ' +
-          `href="${enUSPage.url}"${flawAttribute}>${content} <small>(en-US)</small></a>`
+          `href="${enUSPage.url}"${flawAttribute}>${content}</a>`
         );
       }
     }