fix: update theme colors and improve button styles; update dependencies

This commit is contained in:
mr. M 2025-02-05 22:16:28 +01:00
parent 382263cb85
commit a68cd34785
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
14 changed files with 1067 additions and 2978 deletions

View file

@ -12,18 +12,18 @@
},
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/cloudflare": "^12.2.0",
"@astrojs/react": "^4.1.4",
"@astrojs/cloudflare": "^12.2.1",
"@astrojs/react": "^4.2.0",
"@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.4",
"@astrojs/tailwind": "^6.0.0",
"@fontsource/bricolage-grotesque": "^5.1.0",
"@fortawesome/fontawesome-svg-core": "^6.7.1",
"@fortawesome/free-brands-svg-icons": "^6.7.1",
"@fortawesome/free-solid-svg-icons": "^6.7.1",
"@types/react": "^19.0.1",
"@types/react-dom": "^19.0.2",
"astro": "^5.1.6",
"astro": "^5.2.5",
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"date-fns": "^4.1.0",

3802
pnpm-lock.yaml generated

File diff suppressed because it is too large Load diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 4.5 MiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

View file

@ -17,14 +17,14 @@ const {
{...extra}
href={href}
class:list={[
'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02]',
className,
isPrimary
? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
? 'border-dark bg-dark text-paper shadow-lg'
: isAlert
? 'bg-red-300 text-dark'
: !isBordered
? 'border-2 border-dark hover:bg-dark hover:text-paper'
? 'bg-[rgba(0,0,0,.05)]'
: '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
]}
>
@ -35,14 +35,14 @@ const {
id={id}
{...extra}
class:list={[
'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
'transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]',
className,
isPrimary
? 'bg-dark text-paper'
? 'border-dark bg-dark text-paper shadow-md'
: isAlert
? 'bg-red-300 text-dark'
: !isBordered
? 'border-2 border-dark hover:bg-dark hover:text-paper'
? ''
: '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
]}
>

View file

@ -53,7 +53,7 @@ import Video from './Video.astro'
muted
playsinline
preload="none"
class="rounded-xl border-4 border-white object-cover shadow"
class="rounded-3xl object-cover shadow-md"
/>
</div>
<div class="long-feature xl:!flex-row-reverse">
@ -73,7 +73,7 @@ import Video from './Video.astro'
muted
playsinline
preload="none"
class="rounded-xl border-4 border-white object-cover shadow"
class="rounded-3xl object-cover shadow-md"
/>
</div>
<div class="long-feature">
@ -95,7 +95,7 @@ import Video from './Video.astro'
muted
playsinline
preload="none"
class="rounded-xl border-4 border-white object-cover shadow"
class="rounded-3xl object-cover shadow-md"
/>
</div>
<div class="long-feature xl:!flex-row-reverse">
@ -116,7 +116,7 @@ import Video from './Video.astro'
muted
playsinline
preload="none"
class="rounded-xl border-4 border-white object-cover shadow"
class="rounded-3xl object-cover shadow-md"
/>
</div>
<div class="long-feature">
@ -135,7 +135,7 @@ import Video from './Video.astro'
muted
playsinline
preload="none"
class="rounded-xl border-4 border-white object-cover shadow"
class="rounded-3xl object-cover shadow-md"
/>
</div>
</div>

View file

@ -3,8 +3,7 @@ import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browsers.png'
import myImageLight from '../assets/browsers-light.png'
import myImage from '../assets/browser.png'
import { ArrowRight } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '../animations'
@ -22,7 +21,7 @@ function getHeroTitleAnimation() {
<header
id="header"
class="flex w-full flex-col items-center gap-[20%] py-32 pb-16 text-center md:pb-32 lg:gap-[15%] lg:pb-16"
class="flex w-full flex-col items-center gap-[20%] py-32 text-center lg:gap-[25%]"
>
<div class="flex h-full flex-col items-center justify-center">
<Title
@ -68,13 +67,7 @@ function getHeroTitleAnimation() {
<Image
src={myImage}
alt="Zen browser"
class="mx-auto mb-24 hidden dark:block"
loading="eager"
/>
<Image
src={myImageLight}
alt="Zen browser"
class="mx-auto mb-24 block dark:hidden"
class="mx-4 lg:mx-auto lg:w-3/4 mb-24 shadow-md rounded-3xl dark:opacity-80"
loading="eager"
/>
</motion.span>

View file

@ -21,96 +21,98 @@ import { ThemeSwitch } from 'free-astro-components'
>
<Astronav>
<MenuItems
class="relative mx-auto flex w-full gap-2 bg-paper p-2 lg:w-fit lg:gap-20"
class="relative mx-auto flex w-full gap-2 bg-paper p-2 lg:w-3/4 lg:min-w-fit"
>
<a class="mr-3 flex items-center gap-2 text-lg font-bold" href="/">
<a class="flex items-center gap-2 text-lg font-bold" href="/">
<Logo class="text-dark" />
<span class="hidden lg:block">zen browser</span>
</a>
<div class="flex items-center gap-6 text-xs sm:text-sm lg:text-base">
<Dropdown class="group">
<button class="flex items-center">
<span>Getting Started</span>
<ChevronDown
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
/>
</button>
<DropdownItems>
<div
class="navbar-dropdown left-0 right-1/4 top-16 w-full lg:w-fit"
>
<a class="dropdown-item bg-dark/5 row-span-2" href="/mods">
<div class="dropdown-title">Zen Mods</div>
<div class="dropdown-description">
Customize your browsing experience with Zen Mods.
</div>
<Button isPrimary class="mt-auto">
Try Zen Mods
<ArrowRight class="size-4" />
</Button>
</a>
<a class="dropdown-item" href="/release-notes">
<div class="dropdown-title">Release Notes</div>
<div class="dropdown-description">
Stay up to date with the latest features and improvements.
</div>
</a>
<a class="dropdown-item" href="https://discord.gg/zen-browser">
<div class="dropdown-title">Discord</div>
<div class="dropdown-description">
Join our community on Discord to chat with other Zen users!
</div>
</a>
</div>
</DropdownItems>
</Dropdown>
<Dropdown class="group">
<button class="flex items-center">
<span>Useful Links</span>
<ChevronDown
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
/>
</button>
<DropdownItems>
<div
class="navbar-dropdown left-0 top-16 w-full !grid-cols-1 gap-1 lg:left-1/3 lg:right-1/4 lg:w-fit"
>
<a class="dropdown-item" href="/donate">
<div class="dropdown-title">Donate ❤️</div>
<div class="dropdown-description">
Support the development of Zen Browser with a donation.
</div>
</a>
<a class="dropdown-item" href="/about">
<div class="dropdown-title">About Us 🌟</div>
<div class="dropdown-description">
Learn more about the team behind Zen Browser.
</div>
</a>
<a class="dropdown-item" href="https://docs.zen-browser.app">
<div class="dropdown-title">Documentation</div>
<div class="dropdown-description">
Learn how to use Zen Browser with our documentation.
</div>
</a>
<a
class="dropdown-item"
href="https://github.com/zen-browser"
target="_blank"
<div class="flex mx-auto">
<div class="flex items-center gap-6 text-xs sm:text-sm lg:text-base">
<Dropdown class="group">
<button class="flex items-center">
<span>Getting Started</span>
<ChevronDown
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
/>
</button>
<DropdownItems>
<div
class="navbar-dropdown left-0 right-1/4 top-16 w-full lg:w-fit"
>
<div class="dropdown-title">GitHub</div>
<div class="dropdown-description">
Contribute to the development of Zen Browser on GitHub.
</div>
</a>
</div>
</DropdownItems>
</Dropdown>
<a class="hidden items-center lg:block" href="/mods">
<span>Mods</span>
</a>
<a class="dropdown-item bg-dark/5 row-span-2" href="/mods">
<div class="dropdown-title">Zen Mods</div>
<div class="dropdown-description">
Customize your browsing experience with Zen Mods.
</div>
<Button isPrimary class="mt-auto">
Try Zen Mods
<ArrowRight class="size-4" />
</Button>
</a>
<a class="dropdown-item" href="/release-notes">
<div class="dropdown-title">Release Notes</div>
<div class="dropdown-description">
Stay up to date with the latest features and improvements.
</div>
</a>
<a class="dropdown-item" href="https://discord.gg/zen-browser">
<div class="dropdown-title">Discord</div>
<div class="dropdown-description">
Join our community on Discord to chat with other Zen users!
</div>
</a>
</div>
</DropdownItems>
</Dropdown>
<Dropdown class="group">
<button class="flex items-center">
<span>Useful Links</span>
<ChevronDown
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
/>
</button>
<DropdownItems>
<div
class="navbar-dropdown left-0 top-16 w-full !grid-cols-1 gap-1 lg:left-1/3 lg:right-1/4 lg:w-fit"
>
<a class="dropdown-item" href="/donate">
<div class="dropdown-title">Donate ❤️</div>
<div class="dropdown-description">
Support the development of Zen Browser with a donation.
</div>
</a>
<a class="dropdown-item" href="/about">
<div class="dropdown-title">About Us 🌟</div>
<div class="dropdown-description">
Learn more about the team behind Zen Browser.
</div>
</a>
<a class="dropdown-item" href="https://docs.zen-browser.app">
<div class="dropdown-title">Documentation</div>
<div class="dropdown-description">
Learn how to use Zen Browser with our documentation.
</div>
</a>
<a
class="dropdown-item"
href="https://github.com/zen-browser"
target="_blank"
>
<div class="dropdown-title">GitHub</div>
<div class="dropdown-description">
Contribute to the development of Zen Browser on GitHub.
</div>
</a>
</div>
</DropdownItems>
</Dropdown>
<a class="hidden items-center lg:block" href="/mods">
<span>Mods</span>
</a>
</div>
</div>
<div class="ml-auto flex gap-2">
<div class="flex gap-2 lg:gap-4 items-center">
<div id="theme-switcher" class="ml-auto md:mr-2">
<ThemeSwitch label="" class="px-1 py-2" />
</div>

View file

@ -108,12 +108,12 @@ import Footer from '../components/Footer.astro'
:root {
--zen-paper: #f2f0e3;
--zen-dark: #202020;
--zen-dark: #2e2e2e;
--zen-muted: rgba(0, 0, 0, 0.05);
&[data-theme='dark'] {
--zen-paper: #202020;
--zen-dark: #f2f0e3;
--zen-paper: #1f1f1f;
--zen-dark: #d1cfc0;
--zen-muted: rgba(255, 255, 255, 0.05);
}
}

View file

@ -363,9 +363,7 @@
"version": "1.0.0-a.13",
"date": "05/08/2024",
"extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.",
"features": [
"Allow to remember sidebar width even after collapsing it."
],
"features": ["Allow to remember sidebar width even after collapsing it."],
"fixes": [
{
"description": "Task Manager Icon Missing in Flatpak Version",
@ -921,9 +919,7 @@
"image": true,
"workflowId": 11000317603,
"extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!",
"features": [
"Added a new system for handling keyboard shortcuts"
],
"features": ["Added a new system for handling keyboard shortcuts"],
"fixes": [
{
"description": "The New Tab button is not visible",
@ -980,9 +976,7 @@
"Enabled container tabs by default",
"Improved Expand Tabs on Hover layout"
],
"themeChanges": [
"Toggle inputs will not use the themed tertiary color"
],
"themeChanges": ["Toggle inputs will not use the themed tertiary color"],
"breakingChanges": [
"The keyboard shortcuts will be overriden by the defaults ones in this update"
],
@ -1279,9 +1273,7 @@
"issue": 2156
}
],
"breakingChanges": [
"Removed Show Expand Button option from settings"
],
"breakingChanges": ["Removed Show Expand Button option from settings"],
"themeChanges": [
"The variable '--zen-main-browser-background' will now contain the generated gradient",
"Added the 'unread' attribute for background tabs that haven't been accessed yet"
@ -1384,9 +1376,7 @@
"description": "Fixed wrong aligment on glance action buttons"
}
],
"features": [
"No new features, sorry"
]
"features": ["No new features, sorry"]
},
{
"version": "1.0.1-a.17",
@ -2211,4 +2201,4 @@
"workflowId": 13146940435,
"date": "05/02/2025"
}
]
]

View file

@ -4,4 +4,4 @@
"extra": "",
"fixes": [],
"features": []
}
}