Add external link icon. (#136)

srid · Nov 5, 2021 · bcd6ee7 · bcd6ee7
1 parent fd2d1cf
commit bcd6ee7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/default/templates/base.tpl b/default/templates/base.tpl
@@ -24,13 +24,24 @@
   <tailwindCssShim />
   <!-- CSSEND -->
 
-  <!-- Heist error element -->
   <style type="text/css">
+    /* Heist error element */
     strong.error {
       color: lightcoral;
       font-size: 90%;
       font-family: monospace;
     }
+
+    /* External link icon (see https://stackoverflow.com/a/66093928/5603549)*/
+    a.emanote-external::after
+    {
+      background-color: currentColor;
+      content: '';
+      margin-left: 1px;
+      padding: 0 0.5em;
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z' /%3E%3Cpath d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z' /%3E%3C/svg%3E") no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z' /%3E%3Cpath d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z' /%3E%3C/svg%3E") no-repeat;
+    }
   </style>
   <apply template="/templates/hooks/more-head" />
 

diff --git a/default/templates/components/pandoc.tpl b/default/templates/components/pandoc.tpl
@@ -98,7 +98,7 @@
   <!-- TODO: Expand the above kind of overriding (full DOM control) to other AST nodes (below) -->
   <PandocLink class="text-${theme}-600">
     <Internal class="font-bold hover:underline" />
-    <External class="hover:underline" target="_blank" rel="noopener" />
+    <External class="hover:underline emanote-external" target="_blank" rel="noopener" />
   </PandocLink>
   <CodeBlock class="py-0.5 mb-3 text-sm" />
   <Code class="py-0.5 px-1 rounded bg-gray-700 text-sm text-white" />