From 042e8b9f315a54d3f5df532a487a25b7b3144b6d Mon Sep 17 00:00:00 2001
From: GovanifY <me@govanify.com>
Date: Mon, 24 Jun 2024 21:19:53 +0200
Subject: [PATCH] socials: add mastodon (#328)

(and keep the nazi hellhole for now apparently)
---
 docusaurus.config.js | 16 ++++++++++++++--
 src/css/custom.css   | 16 ++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index ef80bc8e..14073d3b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -197,7 +197,15 @@ const config = {
             target: "_blank",
           },
           {
-            href: "https://twitter.com/PCSX2",
+            href: "https://mastodon.social/@PCSX2",
+            position: "right",
+            rel: "me",
+            className: "header-mastodon-link",
+            "aria-label": "Mastodon",
+            target: "_blank",
+          },
+          {
+            href: "https://x.com/PCSX2",
             position: "right",
             className: "header-twitter-link",
             "aria-label": "Twitter",
@@ -274,9 +282,13 @@ const config = {
                 label: "Forums",
                 href: "https://forums.pcsx2.net/",
               },
+              {
+                label: "Mastodon",
+                href: "https://mastodon.social/@PCSX2",
+              },
               {
                 label: "Twitter",
-                href: "https://twitter.com/PCSX2",
+                href: "https://x.com/PCSX2",
               },
               {
                 label: "YouTube",
diff --git a/src/css/custom.css b/src/css/custom.css
index 694c990f..52a68138 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -173,6 +173,22 @@ aside > div > nav.menu {
     brightness(103%) contrast(104%);
 }
 
+.header-mastodon-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-size: 100% !important;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16"><path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"/></svg>')
+    no-repeat;
+  filter: var(--navbar-svg-icons-filter);
+}
+
+.header-mastodon-link:hover {
+  filter: invert(42%) sepia(24%) saturate(3714%) hue-rotate(175deg)
+    brightness(103%) contrast(104%);
+}
+
 .header-twitter-link::before {
   content: "";
   width: 24px;