From 1f3b8a21f7b3fa043358d2293a46241095b6c586 Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Thu, 8 Feb 2024 22:04:42 +0100
Subject: [PATCH] added external link css

---
 src/components/Navbar.astro                |  7 +++++--
 src/layouts/DocsLayout.astro               |  7 ++-----
 src/pages/docs/discord-sdk-godot/index.mdx |  2 +-
 src/styles/footer.scss                     | 21 ++++++++++++---------
 src/styles/main.scss                       | 16 +++++++++++++++-
 src/styles/sidebar.scss                    |  5 ++++-
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 30034d9..d166497 100644
--- a/src/components/Navbar.astro
+++ b/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"
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index adf0cc6..7a402ce 100644
--- a/src/layouts/DocsLayout.astro
+++ b/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) => {
diff --git a/src/pages/docs/discord-sdk-godot/index.mdx b/src/pages/docs/discord-sdk-godot/index.mdx
index 508c00e..adc5c32 100644
--- a/src/pages/docs/discord-sdk-godot/index.mdx
+++ b/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
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
index 1b64976..94de8be 100644
--- a/src/styles/footer.scss
+++ b/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;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e931df0..635ab26 100644
--- a/src/styles/main.scss
+++ b/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 {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 9215868..b9230c5 100644
--- a/src/styles/sidebar.scss
+++ b/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;
+    }
   }
 }