artie/artie.moe
1
0
Fork 0
mirror of https://github.com/artiemis/artie.moe.git synced 2026-02-14 09:01:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add discord lanyard on hover + tailwind group

Browse Source
This commit is contained in:
Artem 2023-06-17 23:19:37 +02:00
parent 37d8062ab7
commit 1830b4628b
2 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Centerpiece.astro
View File

@ -3,10 +3,10 @@ import blobHeart from "../assets/blobheart.png";
--- ---
<div class="text-center"> <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" hiya, I'm <span class="text-transparent bg-clip-text from-rose-400 to-fuchsia-600 bg-gradient-to-r relative"
>artie<span >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 >/ˈarti/</span
></span ></span
> >
@ -21,8 +21,4 @@ import blobHeart from "../assets/blobheart.png";
[astro-icon] { [astro-icon] {
width: 3rem; width: 3rem;
} }
.greeting:hover .ipa {
opacity: 0.5;
}
</style> </style>

5
src/components/Icons.astro
View File

@ -6,8 +6,9 @@ import { Icon } from "astro-icon";
<a href="https://github.com/artiemis" target="_blank"> <a href="https://github.com/artiemis" target="_blank">
<Icon name="mdi:github" /> <Icon name="mdi:github" />
</a> </a>
<a href="https://discord.com/users/134306884617371648" target="_blank"> <a class="group relative" href="https://discord.com/users/134306884617371648" target="_blank">
<Icon class="hover:text-[#5865F2]" title="aartie" name="mdi:discord" /> <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>
<a rel="me" href="https://infosec.exchange/@artie" target="_blank"> <a rel="me" href="https://infosec.exchange/@artie" target="_blank">
<Icon class="hover:text-[#6364FF]" title="@artie@infosec.exchange" name="mdi:mastodon" /> <Icon class="hover:text-[#6364FF]" title="@artie@infosec.exchange" name="mdi:mastodon" />