mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 17:30:01 +02:00
feat: re-sign all previous work
This commit is contained in:
parent
7ed69308ba
commit
2854cd02ca
4 changed files with 64 additions and 17 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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.",
|
||||||
|
|
|
@ -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の使い方を学ぶ。",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue