joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update contributors image in About page

Browse Source
This commit is contained in:
mauro-balades
2024-09-07 16:50:28 +02:00
parent c43f235aed 1e921b032c
commit 2a6e209cb3
6 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -4,11 +4,13 @@
</picture>
</div>
<h1 align="center">
Zen Browser Website
Zen Browser Website
</h1>
[![](https://data.jsdelivr.com/v1/package/gh/zen-browser/www/badge)](https://www.jsdelivr.com/package/gh/zen-browser/www)
[Analytics](https://plausible.io/zen-browser.app/) | [Uptime-Phare](https://uptime.zen-browser.app)
This repository contains the source code for the Zen Browser Website. We are thrilled to welcome you to our community. Before you start, please read this document to understand how you can contribute to this project.
Zen Browser's website is built with [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), and [Tailwind CSS](https://tailwindcss.com/).

11
src/app/globals.css
View File

@@ -50,11 +50,11 @@
*/
}
.dark {
[data-theme='dark'], .dark {
--background: 0 0% 0%;
--foreground: 0 0% 98%;
--surface: rgb(23, 23, 23);
--surface: rgb(23, 23, 23);
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
@@ -85,12 +85,13 @@
}
@layer base {
html {
@apply scroll-smooth;
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
scroll-behavior: smooth;
}
}
}

2
src/app/layout.tsx
View File

@@ -24,12 +24,12 @@ export default async function RootLayout({
<html suppressHydrationWarning>
<head>
<link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
<script defer data-domain="zen-browser.app" src="https://plausible.io/js/script.js"></script>
<link rel="alternate" type="application/rss+xml" title="Zen Browser Release Notes" href="https://www.zen-browser.app/feed.xml" />
</head>
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>

2
src/components/download.tsx
View File

@@ -215,7 +215,7 @@ export default function DownloadPage() {
<div className="flex items-center justify-center flex-col">
<h1 className="text-6xl font-bold">Downloaded! ❤️</h1>
<p className="text-muted-foreground mt-3 text-center">
Zen Browser has been downloaded successfully. Enjoy browsing the
Your download of Zen Browser will begin shortly. Enjoy browsing the
web with Zen!
</p>
<div className="flex font-bold mt-5 items-center justify-between mx-auto">

2
src/components/features.tsx
View File

@@ -220,7 +220,7 @@ export default function Features() {
</div>
</div>
</div>
<CachedImage width={1350} height={900} src="www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-right" />
<CachedImage width={1350} height={900} src="www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-left" />
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<CachedImage width={1350} height={900} src="www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-left" />

32
src/components/mode-toggle.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import {useEffect, useState} from "react";
import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes";
import { Button } from "./ui/button";
import {
@@ -12,14 +12,36 @@ import {
} from "./ui/dropdown-menu";
export function ModeToggle() {
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
const toggleTheme = () => {
setTheme(theme === "light" ? "dark" : "light");
switch (theme) {
case 'system':
setTheme("dark");
break;
case 'dark':
setTheme("light");
break;
case 'light':
setTheme('system');
break;
}
};
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
console.log(theme);
return (
<Button variant="ghost" size="icon" onClick={toggleTheme}>
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<MoonIcon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<SunIcon className={`${ (theme === 'light') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<MoonIcon className={`${ (theme === 'dark') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<span className="sr-only">Toggle theme</span>
</Button>
);