From 1830b4628b5524cb7ba19f5e37d347c3578cd566 Mon Sep 17 00:00:00 2001
From: Artem <artur8259@outlook.com>
Date: Sat, 17 Jun 2023 23:19:37 +0200
Subject: [PATCH] add discord lanyard on hover + tailwind group

---
 src/components/Centerpiece.astro | 8 ++------
 src/components/Icons.astro       | 5 +++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Centerpiece.astro b/src/components/Centerpiece.astro
index 05d31b3..d1f96b0 100644
--- a/src/components/Centerpiece.astro
+++ b/src/components/Centerpiece.astro
@@ -3,10 +3,10 @@ import blobHeart from "../assets/blobheart.png";
 ---
 
 <div class="text-center">
-  <p class="greeting font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
+  <p class="group font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
     hiya, I'm <span class="text-transparent bg-clip-text from-rose-400 to-fuchsia-600 bg-gradient-to-r relative"
       >artie<span
-        class="ipa absolute lg:bottom-[3.25rem] bottom-10 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 hover:opacity-50 transition duration-50"
+        class="absolute lg:bottom-[3.25rem] bottom-10 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 group-hover:opacity-50 hover:opacity-50 transition duration-50"
         >/ˈarti/</span
       ></span
     >
@@ -21,8 +21,4 @@ import blobHeart from "../assets/blobheart.png";
   [astro-icon] {
     width: 3rem;
   }
-
-  .greeting:hover .ipa {
-    opacity: 0.5;
-  }
 </style>
diff --git a/src/components/Icons.astro b/src/components/Icons.astro
index 4d8ef2d..4597374 100644
--- a/src/components/Icons.astro
+++ b/src/components/Icons.astro
@@ -6,8 +6,9 @@ import { Icon } from "astro-icon";
   <a href="https://github.com/artiemis" target="_blank">
     <Icon name="mdi:github" />
   </a>
-  <a href="https://discord.com/users/134306884617371648" target="_blank">
-    <Icon class="hover:text-[#5865F2]" title="aartie" name="mdi:discord" />
+  <a class="group relative" href="https://discord.com/users/134306884617371648" target="_blank">
+    <Icon class="hover:text-[#5865F2]" name="mdi:discord" />
+    <img class="xl:group-hover:opacity-100 absolute top-10 left-8 z-10 transition-opacity max-w-none opacity-0 pointer-events-none" src="https://lanyard.cnrad.dev/api/134306884617371648?hideDiscrim=true" alt="Discord Presence">
   </a>
   <a rel="me" href="https://infosec.exchange/@artie" target="_blank">
     <Icon class="hover:text-[#6364FF]" title="@artie@infosec.exchange" name="mdi:mastodon" />