From 587ac7ff7e3ecbdbf74d315665038729c9487956 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 19 Nov 2022 16:52:14 +0100
Subject: [PATCH] add mastodon contact link

---
 src/lib/components/contact.svelte | 104 +++++++++++++++++-------------
 1 file changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/contact.svelte b/src/lib/components/contact.svelte
index 89d3219..3189245 100644
--- a/src/lib/components/contact.svelte
+++ b/src/lib/components/contact.svelte
@@ -14,53 +14,65 @@
 </script>
 
 <div class="rounded-lg bg-dark-800 text-gray-300 max-w-100 m-auto mb-5 mt-15 p-5">
-    <a href="https://goo.gl/maps/pM3bGyx9u5uBuqqv5" class="flex items-center justify-center w-full p-5" rel="noreferrer noopener" target="_blank">
-        <div class="text-gray-400 h-7 w-7">
-            <Location />
-        </div>
-        Prague, Czech Republic
-    </a>
-    <div class="profiles">
-        <a href="https://github.com/danbulant" use:goatCounter data-goatcounter-click="contact-github" rel="noreferrer noopener" target="_blank">
-            <span class="platform">GitHub</span>
-            <div class="main">
-                <img src="/tech/github.png" alt="" draggable={false}>
-                <span class="name">danbulant</span>
+    <div class="list">
+        <a href="https://goo.gl/maps/pM3bGyx9u5uBuqqv5" class="flex items-center justify-center w-full p-5" rel="noreferrer noopener" target="_blank">
+            <div class="text-gray-400 h-7 w-7">
+                <Location />
             </div>
+            Prague, Czech Republic
         </a>
-        <a href="https://www.linkedin.com/in/danbulant/" use:goatCounter data-goatcounter-click="contact-linkedin" rel="noreferrer noopener" target="_blank">
-            <span class="platform">LinkedIn</span>
-            <div class="main">
-                <img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}>
-                <span class="name">danbulant</span>
+        <div class="profiles">
+            <a href="https://github.com/danbulant" use:goatCounter data-goatcounter-click="contact-github" rel="me" target="_blank">
+                <span class="platform">GitHub</span>
+                <div class="main">
+                    <img src="/tech/github.png" alt="" draggable={false}>
+                    <span class="name">danbulant</span>
+                </div>
+            </a>
+            <a href="https://www.linkedin.com/in/danbulant/" use:goatCounter data-goatcounter-click="contact-linkedin" rel="me" target="_blank">
+                <span class="platform">LinkedIn</span>
+                <div class="main">
+                    <img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}>
+                    <span class="name">danbulant</span>
+                </div>
+            </a>
+            <a href="https://discord.gg/XKPbz5xRuK" use:goatCounter data-goatcounter-click="contact-discord" target="_blank">
+                <span class="platform">Discord</span>
+                <div class="main">
+                    <img src="/tech/discord.png" alt="" draggable={false}>
+                    <span class="name">TechmandanCZ#3372</span>
+                </div>
+            </a>
+            <a href="https://twitter.com/danbulant" use:goatCounter data-goatcounter-click="contact-twitter" rel="me" target="_blank">
+                <span class="platform">Twitter</span>
+                <div class="main">
+                    <img src="/tech/twitter.png" alt="" draggable={false}>
+                    <span class="name">@danbulant</span>
+                </div>
+            </a>
+            <div>
+                <span class="platform">Mastodon</span>
+                <div class="main">
+                    <img src="/tech/mastodon.png" alt="" draggable={false}>
+                    <div class="flex flex-col">
+                        <a rel="me" use:goatCounter data-goatcounter-click="contact-mastodon" href="https://mastodon.social/danbulant" class="name !hover:underline">@danbulant@mastodon.social</a>
+                        <a rel="me" use:goatCounter data-goatcounter-click="contact-layer8" href="https://layer8.space/@techmandan" class="name !hover:underline">@techmandan@layer8.space</a>
+                    </div>
+                </div>
             </div>
-        </a>
-        <a href="https://discord.gg/XKPbz5xRuK" use:goatCounter data-goatcounter-click="contact-discord" rel="noreferrer noopener" target="_blank">
-            <span class="platform">Discord</span>
-            <div class="main">
-                <img src="/tech/discord.png" alt="" draggable={false}>
-                <span class="name">TechmandanCZ#3372</span>
-            </div>
-        </a>
-        <a href="https://twitter.com/danbulant" use:goatCounter data-goatcounter-click="contact-twitter" rel="noreferrer noopener" target="_blank">
-            <span class="platform">Twitter</span>
-            <div class="main">
-                <img src="/tech/twitter.png" alt="" draggable={false}>
-                <span class="name">danbulant</span>
-            </div>
-        </a>
-        <a href="mailto:me@danbulant.eu" use:goatCounter data-goatcounter-click="contact-email">
-            <span class="platform">Email</span>
-            <div class="main">
-                <img src="/tech/mail.svg" alt="" draggable={false}>
-                <span class="name">me@danbulant.eu</span>
-            </div>
-        </a>
-        <div>
-            <div class="platform">Time</div>
-            <div class="main">
-                <img src="/tech/clock.svg" alt="" draggable={false}>
-                <div class="name">GMT+1 - {time.setZone("Europe/Prague", { keepLocalTime: true }).toFormat("HH:mm:ss")}</div>
+            <a href="mailto:me@danbulant.eu" use:goatCounter data-goatcounter-click="contact-email">
+                <span class="platform">Email</span>
+                <div class="main">
+                    <img src="/tech/mail.svg" alt="" draggable={false}>
+                    <span class="name">me@danbulant.eu</span>
+                </div>
+            </a>
+            <div>
+                <div class="platform">Time</div>
+                <div class="main">
+                    <img src="/tech/clock.svg" alt="" draggable={false}>
+                    <div class="name">GMT+1 - {time.setZone("Europe/Prague", { keepLocalTime: true }).toFormat("HH:mm:ss")}</div>
+                </div>
             </div>
         </div>
     </div>
@@ -71,12 +83,12 @@
         @apply text-gray-400;
     }
     .main {
-        @apply flex gap-3 pt-1;
+        @apply flex gap-3 pt-1 items-center;
     }
     .profiles {
         @apply max-w-80 m-auto flex flex-col;
     }
-    a:active, a:hover {
+    a:hover, a:active {
         @apply no-underline;
     }
     a:active .main, a:hover .main {