Include more top-level domains

Author: dbreseman

assets/scss/_styles_project.scss

@@ -231,21 +231,30 @@ a:not(.btn):not(.td-sidebar-link):visited {
     color: $purple;
 }
 
-// Add icon after external links (but exclude buttons and the right sidebar icons)
-a[href*=".com"]:not([href*="github.com/mendix/"]):not(.btn)::after,
-a[href*=".org"]:not(.btn)::after {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    margin-left: .2rem;
-    vertical-align: sub;
-    content: url("/icons/external-unvisited.svg"); // Fill color is $link-color (blue-8 from PDS). Keep it updated with _variables_project.scss.
+// Define list of top-level domains
+$tlds: ".co", ".org", ".io", ".net", ".gov", ".edu", ".nl", ".de";
+
+// Add external icon after links with the specified domains
+main a {
+  @each $tld in $tlds {
+    &[href*="#{$tld}"]:not(.btn)::after {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        margin-left: .2rem;
+        vertical-align: sub;
+        content: url("/icons/external-unvisited.svg"); // Fill color is $link-color (blue-8 from PDS). Keep it updated with _variables_project.scss.
+    }
+  }
 }
 
-// Use icon with different fill color when link is hovered over
-a[href*=".com"]:hover:not([href*="github.com/mendix/"]):not(.btn)::after,
-a[href*=".org"]:hover:not(.btn)::after {
-    content: url("/icons/external-hover.svg"); // Fill color is $link-hover-color (blue-9 from PDS). Keep it updated with _variables_project.scss.
+// Change external link icon (color) upon hover
+main a {
+    @each $tld in $tlds {
+      &[href*="#{$tld}"]:hover:not(.btn)::after {
+          content: url("/icons/external-hover.svg"); // Fill color is $link-color (blue-8 from PDS). Keep it updated with _variables_project.scss.
+      }
+    }
 }
 
 .btn {