added external link css

src/styles/footer.scss

@@ -1,12 +1,15 @@
 footer {
-    display: flexbox;
-    align-items: center;
-    text-align: center;
-    bottom: 0;
-    width: 100%;
-    margin-bottom: 2vh;
+  display: flexbox;
+  align-items: center;
+  text-align: center;
+  bottom: 0;
+  width: 100%;
+  margin-bottom: 2vh;
 
-    a {
-        color: white;
+  a {
+    color: white;
+    &[target="_blank"]::after {
+      background-color: white;
     }
-}
+  }
+}

src/styles/main.scss

@@ -56,9 +56,23 @@ b {
   font-family: "Satoshi-Bold";
   color: $accent;
 }
-
 a {
   color: $link;
+  &[target="_blank"]::after {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    vertical-align: -0.125em;
+    content: " ";
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0  0  24  24'%3E%3Cpath fill='%23000' d='M14  3v2h3.59l-9.83  9.83l1.41  1.41L19  6.41V10h2V3m-2  16H5V5h7V3H5a2  2  0  0  0-2  2v14a2  2  0  0  0  2  2h14a2  2  0  0  0  2-2v-7h-2z'/%3E%3C/svg%3E")
+      no-repeat center;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0  0  24  24'%3E%3Cpath fill='%23000' d='M14  3v2h3.59l-9.83  9.83l1.41  1.41L19  6.41V10h2V3m-2  16H5V5h7V3H5a2  2  0  0  0-2  2v14a2  2  0  0  0  2  2h14a2  2  0  0  0  2-2v-7h-2z'/%3E%3C/svg%3E")
+      no-repeat center;
+    background-color: $link; /* This will color the SVG */
+  }
+  &.social::after {
+    content: none;
+  }
 }
 
 figure {

src/styles/sidebar.scss

@@ -14,8 +14,11 @@
   .active {
     color: $accent;
   }
-  .gh-mark {
+  .repo-link {
     text-decoration: underline;
     color: $accent;
+    &[target="_blank"]::after {
+      background-color: $accent;
+    }
   }
 }