fix: add branded link styles and fix mobile external icon

src/layouts/Layout.astro

@@ -274,21 +274,49 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   a.emphasized:hover {
     opacity: 80%;
   }
-  a.emphasized.github.branded {
+
+  a.emphasized.branded {
     color: white;
+    font-size: 22px;
+    font-weight: 500;
+    padding: 0.25rem 1.1875rem 0.4375rem 0.75rem;
+    line-height: 1.7875rem;
+    margin: 0 0.25rem;
+    white-space: nowrap;
+  }
+  a.emphasized.branded::before {
+    display: inline-block;
+    width: 1.625rem;
+    height: 1.625rem;
+    margin-right: 0.75rem;
+  }
+  a.emphasized.github {
     background-color: #6E5494;
+    padding-left: 0.5rem;
   }
-  a.emphasized.twitter.branded {
-    color: white;
+  a.emphasized.github::before {
+    content: url('/images/icons/gitHub-logo.svg');
+    transform: translateY(4px);
+  }
+  a.emphasized.twitter {
     background-color: #1E1E1E;
   }
+  a.emphasized.twitter:before {
+    content: url('/images/icons/twitter-logo.svg');
+    transform: translateY(3px);
+  }
   a.emphasized.external::after {
     content: url('/images/icons/external-link-icon.svg');
     display: inline-block;
     width: 0.75rem;
     height: 0.75rem;
     margin-left: 1rem;
-    transform: scale(1.25) translateY(-5px);
+    transform: scale(1.25) translateY(-2px);
+  }
+  @media (min-width: 1024px) {
+    a.emphasized.external::after {
+      transform: scale(1.25) translateY(-4px);
+    }
   }
 
   /* Hide scrollbar for Chrome, Safari and Opera */

src/pages/join.astro

@@ -158,7 +158,7 @@ const seoMetaData = {
       sectionStyles="!bg-taupe px-[1.5rem] min-h-[20rem] lg:px-[3.5rem]"
       backgroundStyling="bg-[url('/images/background-images/moreHelp-top.svg')] bg-contain bg-no-repeat bg-left h-full top-0 bottom-0 left-0 w-1/2 z-0"
       backgroundBottomStyling="bg-[url('/images/background-images/moreHelp-bottom.svg')] bg-contain bg-no-repeat bg-right bottom-0 right-0 h-full w-1/2 z-0">
-      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem]">
+      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem] z-10">
         <h2 class="text-center">Want some more help?</h2>
         <p class="text-center">Reach out to us at <a href="" target="_BLANK" class="emphasized github branded">Github</a> or <a href="" target="_BLANK" class="emphasized twitter branded">Twitter</a> if you’ve got more questions. We’re happy to help!</p>
       </div>