feat: re-sign all previous work

This commit is contained in:
Vrezh Fedora 2025-06-21 22:17:27 +02:00
parent 7ed69308ba
commit 2854cd02ca
No known key found for this signature in database
GPG key ID: 4F9848118BFDF1F9
4 changed files with 64 additions and 17 deletions

View file

@ -71,11 +71,6 @@ const {
>{menu.donate}</a >{menu.donate}</a
> >
</li> </li>
<li>
<a href={getLocalePath('/about')} class="block text-dark hover:text-coral"
>{menu.aboutUs}</a
>
</li>
<li> <li>
<a href="https://docs.zen-browser.app" class="block text-dark hover:text-coral" <a href="https://docs.zen-browser.app" class="block text-dark hover:text-coral"
>{menu.documentation}</a >{menu.documentation}</a
@ -91,6 +86,10 @@ const {
</ul> </ul>
</li> </li>
<!-- Extra Links --> <!-- Extra Links -->
<li>
<a href={getLocalePath('/about')} class="block text-dark hover:text-coral">{menu.aboutUs}</a
>
</li>
<li> <li>
<a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral" <a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral"
>{menu.mods}</a >{menu.mods}</a

View file

@ -32,7 +32,7 @@ const {
class="hidden items-center gap-6 place-self-center text-xs sm:text-sm lg:flex lg:text-base" class="hidden items-center gap-6 place-self-center text-xs sm:text-sm lg:flex lg:text-base"
> >
<Dropdown class="group"> <Dropdown class="group">
<button class="flex items-center"> <button class="flex items-center rounded-lg p-3 hover:bg-muted group-open:bg-muted">
<span>{menu.gettingStarted}</span> <span>{menu.gettingStarted}</span>
<ChevronDownIcon <ChevronDownIcon
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2" class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
@ -66,7 +66,7 @@ const {
</DropdownItems> </DropdownItems>
</Dropdown> </Dropdown>
<Dropdown class="group"> <Dropdown class="group">
<button class="flex items-center"> <button class="flex items-center rounded-lg p-3 hover:bg-muted group-open:bg-muted">
<span>{menu.usefulLinks}</span> <span>{menu.usefulLinks}</span>
<ChevronDownIcon <ChevronDownIcon
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2" class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
@ -80,12 +80,6 @@ const {
{menu.donateDesc} {menu.donateDesc}
</div> </div>
</a> </a>
<a class="dropdown-item" href={getLocalePath('/about')}>
<div class="dropdown-title">{menu.aboutUs}</div>
<div class="dropdown-description">
{menu.aboutUsDesc}
</div>
</a>
<a class="dropdown-item" href="https://docs.zen-browser.app"> <a class="dropdown-item" href="https://docs.zen-browser.app">
<div class="dropdown-title">{menu.documentation}</div> <div class="dropdown-title">{menu.documentation}</div>
<div class="dropdown-description"> <div class="dropdown-description">
@ -101,7 +95,16 @@ const {
</div> </div>
</DropdownItems> </DropdownItems>
</Dropdown> </Dropdown>
<a class="hidden items-center lg:block" href={getLocalePath('/mods')}> <a
class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/about') ? ' text-coral' : ''}`}
href={getLocalePath('/about')}
>
<span>{menu.aboutUs}</span>
</a>
<a
class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/mods') ? ' text-coral' : ''}`}
href={getLocalePath('/mods')}
>
<span>{menu.mods}</span> <span>{menu.mods}</span>
</a> </a>
</div> </div>
@ -135,7 +138,7 @@ const {
<style> <style>
.navbar-dropdown { .navbar-dropdown {
@apply absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm; @apply absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border border-dark bg-paper p-3 shadow-lg;
& .dropdown-item { & .dropdown-item {
@apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200; @apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200;
@ -158,3 +161,48 @@ const {
@apply text-dark; @apply text-dark;
} }
</style> </style>
<script>
import { animate, stagger } from 'animejs'
function animateDropdown(dropdown: Element) {
animate(dropdown, {
opacity: { from: 0, to: 1 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
})
const items = dropdown.querySelectorAll('.dropdown-item')
if (items.length) {
animate(items, {
opacity: { from: 0, to: 1 },
translateY: { from: 20, to: 0 },
filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300,
delay: stagger(150),
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
})
}
}
// Initialize dropdown animations on page load
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
const dropdown = toggle.querySelector('.navbar-dropdown')
if (!dropdown) return
if (!toggle.classList.contains('hidden')) {
animateDropdown(dropdown)
}
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'class' && !toggle.classList.contains('hidden')) {
animateDropdown(dropdown)
}
})
})
observer.observe(toggle, { attributes: true })
})
})
</script>

View file

@ -502,7 +502,7 @@
"discordDesc": "Join our community on Discord to chat with other Zen users!", "discordDesc": "Join our community on Discord to chat with other Zen users!",
"donate": "Donate ❤️", "donate": "Donate ❤️",
"donateDesc": "Support the development of Zen with a donation.", "donateDesc": "Support the development of Zen with a donation.",
"aboutUs": "About Us 🌟", "aboutUs": "About Us",
"aboutUsDesc": "Learn more about the team behind Zen.", "aboutUsDesc": "Learn more about the team behind Zen.",
"documentation": "Documentation", "documentation": "Documentation",
"documentationDesc": "Learn how to use Zen with our documentation.", "documentationDesc": "Learn how to use Zen with our documentation.",

View file

@ -507,7 +507,7 @@
"discordDesc": "Discordコミュニティで他のZenユーザーと交流", "discordDesc": "Discordコミュニティで他のZenユーザーと交流",
"donate": "寄付 ❤️", "donate": "寄付 ❤️",
"donateDesc": "Zen開発を寄付で応援。", "donateDesc": "Zen開発を寄付で応援。",
"aboutUs": "私たちについて 🌟", "aboutUs": "私たちについて",
"aboutUsDesc": "Zenのチームについて知る。", "aboutUsDesc": "Zenのチームについて知る。",
"documentation": "ドキュメント", "documentation": "ドキュメント",
"documentationDesc": "ドキュメントでZenの使い方を学ぶ。", "documentationDesc": "ドキュメントでZenの使い方を学ぶ。",