diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/SocialNavbar.astro | 81 |
1 files changed, 59 insertions, 22 deletions
diff --git a/src/components/SocialNavbar.astro b/src/components/SocialNavbar.astro index 1ad096f..eb29853 100644 --- a/src/components/SocialNavbar.astro +++ b/src/components/SocialNavbar.astro @@ -5,18 +5,36 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; <style> .dark-social-navbar-wrapper { display: flex; + flex-direction: column; + align-items: center; + gap: 12px; margin-top: 5px; - justify-content: center; } .dark-social-navbar { display: flex; gap: 15px; - padding: 10px 20px; + padding: 6px 20px; border-radius: 8px; } + .contact-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + } + + .contact-label { + font-size: 0.85rem; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #ffffff80; + } + .dark-social-icon { + position: relative; display: flex; justify-content: center; align-items: center; @@ -44,6 +62,8 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; + pointer-events: none; + z-index: 10; } .dark-social-icon:hover::before { opacity: 1; @@ -63,32 +83,49 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; title="GitHub"><i class="fab fa-github"></i></a > <a - href="https://twitter.com/pinapelz" - class="dark-social-icon" - title="Twitter/X"><i class="fab fa-x-twitter"></i></a - > - <a - href="https://discord.com/users/246787839570739211" - title="Discord" - class="dark-social-icon"><i class="fab fa-discord"></i></a - > - <a - href="mailto:yukais@pinapelz.com" - class="dark-social-icon" - title="Email"><i class="fa fa-envelope"></i></a - > - <a href="https://blog.pinapelz.com" class="dark-social-icon" title="Blog"><i class="fa fa-book"></i></a > <a - href="https://pinapelz.moe" + href="https://www.linkedin.com/in/yukais/" class="dark-social-icon" - title="pinapelz.moe"><i class="fa fa-globe"></i></a - > - <a href="/Yukai_Shan.asc" class="dark-social-icon" title="PGP" - ><i class="fa fa-key"></i></a + title="LinkedIn"><i class="fa-brands fa-linkedin"></i></a > </div> + <div class="contact-section"> + <span class="contact-label">Contact</span> + <div class="dark-social-navbar"> + <a + href="mailto:yukais@pinapelz.com" + class="dark-social-icon" + title="Email"><i class="fa fa-envelope"></i></a + > + <a + href="https://discord.com/users/246787839570739211" + title="Discord" + class="dark-social-icon"><i class="fab fa-discord"></i></a + > + <a + href="https://twitter.com/pinapelz" + class="dark-social-icon" + title="Twitter/X DM"><i class="fab fa-x-twitter"></i></a + > + <a + href="https://matrix.to/#/@pinapelz:chat.moekyun.me" + class="dark-social-icon" + title="Matrix"><i class="fa-brands fa-matrix"></i></a + > + <a + href="xmpp:pinapelz@xmpp.moekyun.me" + class="dark-social-icon" + title="XMPP"><i class="fa-brands fa-xmpp"></i></a + > + <a + href="/Yukai_Shan.asc" + class="dark-social-icon" + title="PGP"><i class="fa fa-key"></i></a + > + </div> + </div> </div> |