diff --git a/public/images/icons/gitHub-logo.svg b/public/images/icons/gitHub-logo.svg new file mode 100644 index 0000000..81b0a6d --- /dev/null +++ b/public/images/icons/gitHub-logo.svg @@ -0,0 +1,3 @@ + diff --git a/public/images/icons/twitter-logo.svg b/public/images/icons/twitter-logo.svg new file mode 100644 index 0000000..f17f641 --- /dev/null +++ b/public/images/icons/twitter-logo.svg @@ -0,0 +1,3 @@ + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9272ee5..9dbb9f4 100644 --- a/src/layouts/Layout.astro +++ b/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 */ diff --git a/src/pages/join.astro b/src/pages/join.astro index 26e8d35..01bce61 100644 --- a/src/pages/join.astro +++ b/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"> -