good pop out position

QwikDev · Jan 15, 2025 · 3ea7bbc · 3ea7bbc
1 parent 6e2e0a1
commit 3ea7bbc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/apps/website/src/components/home/logo-hover/logo-hover.css b/apps/website/src/components/home/logo-hover/logo-hover.css
@@ -6,6 +6,11 @@
   line-height: 1;
 }
 
+.logo-hover {
+  position: relative;
+  width: fit-content;
+}
+
 .intro h1 span {
   font-size: var(--step-5);
   display: flex;
@@ -27,9 +32,10 @@
   color: hsl(var(--light));
   opacity: 0;
   scale: 0;
+  left: 50%;
+  top: 0;
   transition: scale 200ms ease, opacity 200ms ease;
   pointer-events: none;
-  top: 0;
   background: var(--off-black);
   border: 1px solid white;
   border-radius: 9999999px;

diff --git a/apps/website/src/components/home/logo-hover/logo-hover.tsx b/apps/website/src/components/home/logo-hover/logo-hover.tsx
@@ -50,7 +50,7 @@ export const LogoHover = component$(() => {
   });
 
   return (
-    <>
+    <div class="logo-hover">
       <h1>
         <span
           onMouseEnter$={() => handleMouseEnter(qwikLogoRef, qwikRect)}
@@ -85,6 +85,6 @@ export const LogoHover = component$(() => {
       </h1>
       <QwikIcon ref={qwikLogoRef} class="qwik-logo tooltip" />
       <AstroIcon ref={astroLogoRef} class="astro-logo tooltip" />
-    </>
+    </div>
   );
 });