added external link css

src/components/Navbar.astro

@@ -34,10 +34,13 @@ import "../styles/navbar.scss";
     }
   </nav>
   <div>
-    <a href="https://github.com/vaporvee" target="_blank"
+    <a href="https://github.com/vaporvee" class="social" target="_blank"
       ><img src="/github-mark.svg" alt="My GitHub account" class="social" /></a
     >
-    <a href="https://www.linkedin.com/in/yannik-ain/" target="_blank"
+    <a
+      href="https://www.linkedin.com/in/yannik-ain/"
+      class="social"
+      target="_blank"
       ><img
         src="/linkedin-icon.svg"
         alt="My Linkedin account"

src/layouts/DocsLayout.astro

@@ -23,13 +23,10 @@ const docs = unsortedDocs.sort((a) =>
   <div class="sidebar">
     <div class="sidebar" style="display: unset;">
       <a
-        class="gh-mark"
+        class="repo-link"
         href={"https://github.com/vaporvee/" + frontmatter.repo}
         target="_blank"
-      >
-        <span style="font-size: 14px;">vaporvee /</span>
-        {frontmatter.repo}
-        <Icon name="mdi:external-link" /></a
+        ><span style="font-size: 14px;">vaporvee /</span>{frontmatter.repo}</a
       ><br /><br />
       {
         docs.map((page) => {

src/pages/docs/discord-sdk-godot/index.mdx

@@ -24,7 +24,7 @@ The GameSDK's Achievements, Applications, Voice, Images, Lobbies, Networking, St
 The plugin only works with 4.2 and above for the current version
 :::
 <br/>
-:::assert
+:::assert{title="Important info"}
 To make anything work in the plugin make sure to run
 
  ```gdscript

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;
+    }
   }
 }