Provide ability to mark links as external using svg icon

2 files changed, 29 insertions, 0 deletions

diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index e60221d..a996917 100644
--- a/assets/sass/_customize.scss
+++ b/assets/sass/_customize.scss
@@ -201,6 +201,18 @@ ul.pager li {
   border-color: transparent $text-light-color transparent transparent;
 }
 
+a.external:after {
+  background-color: #ac4142;
+  content: "";
+  display: inline-flex;
+  height: 10px;
+  margin-left: 4px;
+  width: 10px;
+
+  @include mask-size (cover);
+  @include mask-image (url("/img/external-link.svg"));
+}
+
 /* Themes */
 
 /* Red */
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index a51f90a..4c3168d 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -175,3 +175,20 @@ $break-desktop: 1600px;
       -ms-box-decoration-break: $value;
           box-decoration-break: $value;
 }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Mask
+
+
+// Usage: @include @include mask-image (url("/img/external-link.svg"));
+
+@mixin mask-image($value) {
+  -webkit-mask-image: $value; // Chrome, iOS, Safari
+          mask-image: $value; // None yet / Non-standard
+}
+
+// Usage: @include mask-size (cover);
+
+@mixin mask-size($value) {
+  -webkit-mask-size: $value; // Chrome, iOS, Safari
+          mask-size: $value; // None yet / Non-standard
+}