feat: enhance UI components with improved styling and layout adjustments
Some checks are pending
Upload to bunny / upload (1.22.3) (push) Waiting to run

This commit is contained in:
mr. M 2024-12-10 13:48:13 +01:00
parent 1b41dfa9a2
commit c30e06b20a
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
5 changed files with 18 additions and 11 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 213 KiB

Before After
Before After

View file

@ -70,12 +70,12 @@ import browserGlance from '../assets/browser-glance.webm';
</div>
</div>
<div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
<div class="bg-coral rounded-xl ml-auto" id="feature-list-image">
<Image src={browserWorkspaces} alt="Browser Workspaces" class="rounded-xl" />
<Image src={browserCompactMode} alt="Browser Compact Mode" class="rounded-xl" />
<Image src={browserSplitViews} alt="Browser Split Views" class="rounded-xl" />
<Image src={browserSidebar} alt="Browser Sidebar" class="rounded-xl" />
<video src={browserGlance} autoplay loop muted playsinline class="rounded-xl absolute top-0 left-0 w-full h-full object-cover" />
<div class="ml-auto" id="feature-list-image">
<Image src={browserWorkspaces} alt="Browser Workspaces" class="rounded-xl shadow border-4 border-white" />
<Image src={browserCompactMode} alt="Browser Compact Mode" class="rounded-xl shadow border-4 border-white" />
<Image src={browserSplitViews} alt="Browser Split Views" class="rounded-xl shadow border-4 border-white" />
<Image src={browserSidebar} alt="Browser Sidebar" class="rounded-xl shadow border-4 border-white" />
<video src={browserGlance} autoplay loop muted playsinline class="rounded-xl shadow border-4 border-white absolute top-0 left-0 w-full h-full object-cover" />
</div>
</div>
</div>

View file

@ -19,7 +19,7 @@ const Reddit = icon({ prefix: "fab", iconName: "reddit" });
<footer
id="footer"
class="flex flex-col w-full p-4 lg:p-24 !pb-0 gap-24 md:gap-[15%] bg-dark text-paper border-t border-dark relative overflow-hidden"
class="flex flex-col w-full py-12 px-4 lg:p-24 !pb-0 gap-24 md:gap-[15%] bg-dark text-paper border-t border-dark relative overflow-hidden"
>
<div class="w-full flex justify-between items-center flex-col lg:flex-row">
<div>
@ -29,12 +29,12 @@ const Reddit = icon({ prefix: "fab", iconName: "reddit" });
about your experience, not your data.
</Description>
</div>
<div id="theme-switcher">
<div id="theme-switcher" class="mt-12 lg:py-0 w-fit">
<ThemeSwitch label="Toggle theme" class="!text-dark" />
</div>
</div>
<div class="flex flex-col justify-between w-full lg:flex-row gap-6 lg:pr-52 my-12">
<Button href="/download" isPrimary class="h-fit bg-paper !text-dark">
<div class="flex flex-col justify-between w-full lg:flex-row gap-6 lg:pr-52 lg:my-12">
<Button href="/download" isPrimary class="h-fit bg-paper w-fit !text-dark">
Download
<ArrowRight class="size-4" />
</Button>

View file

@ -82,6 +82,13 @@ import Footer from "../components/Footer.astro";
font-weight: 500;
font-variation-settings: "wdth" 100;
}
h1 .italic {
font-family: "Junicode-Italic", serif;
font-weight: 400;
font-feature-settings: 'swsh' 0;
font-style: normal;
}
</style>
<style is:global>
/* Declare a custom CSS class to make the icon look right */

View file

@ -1697,7 +1697,7 @@ export const releaseNotes: ReleaseNote[] = [
image: true,
workflowId: 12246343549,
extra:
"This release introduces a new stage for Zen Browser, the beta stage! This means that we are getting closer to a stable release, and we are now focusing on fixing bugs and improving the overall experience.\n\nWe've added a new feature called Zen Sync, which allows you to sync your workspaces, pinned tabs, and essentials across devices. We've also added a new feature called Zen Search, which allows you to search for tabs, workspaces, and pinned tabs.\n\nWe've also updated to the latest stable version of Firefox (132.0.2), and we've added a new feature called Zen Sync, which allows you to sync your workspaces, pinned tabs, and essentials across devices.",
"This release introduces a new stage for Zen Browser, the beta stage! This means that we are getting closer to a stable release, and we are now focusing on fixing bugs and improving the overall experience.\n\nWe've made some significant changes to the UI, including a new layout for the browser called single toolbar and much more!",
fixes: [
{
description: "Various fixes in version 20",