From 3f29de28f364445a67f077dcdd2efa1589b728fb Mon Sep 17 00:00:00 2001
From: Artem <artur8259@outlook.com>
Date: Sun, 7 May 2023 02:42:26 +0200
Subject: [PATCH] show ipa on greeting hover

---
 src/components/Centerpiece.astro | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Centerpiece.astro b/src/components/Centerpiece.astro
index 9268497..6ff9770 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="font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
+  <p class="greeting font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
     hiya, I'm <span class="text-pink-300 relative"
       >Artur<span
-        class="absolute lg:bottom-12 bottom-9 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="ipa absolute lg:bottom-12 bottom-9 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 hover:opacity-50 transition duration-50"
         >/ˈar.tur/</span
       ></span
     > <img class="align-top lg:w-12 w-10 inline-block pointer-events-none select-none" src={blobHeart} alt="blob heart">
@@ -20,4 +20,8 @@ import blobHeart from "../assets/blobheart.png";
   [astro-icon] {
     width: 3rem;
   }
+
+  .greeting:hover .ipa {
+    opacity: 0.5;
+  }
 </style>