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> </picture>
</div> </div>
<h1 align="center"> <h1 align="center">
Zen Browser Website Zen Browser Website
</h1> </h1>
[![](https://data.jsdelivr.com/v1/package/gh/zen-browser/www/badge)](https://www.jsdelivr.com/package/gh/zen-browser/www) [![](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. 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/). 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%; --background: 0 0% 0%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--surface: rgb(23, 23, 23); --surface: rgb(23, 23, 23);
--card: 0 0% 3.9%; --card: 0 0% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
@@ -85,12 +85,13 @@
} }
@layer base { @layer base {
html {
@apply scroll-smooth;
}
* { * {
@apply border-border; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @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> <html suppressHydrationWarning>
<head> <head>
<link rel="me" href="https://fosstodon.org/@zenbrowser"></link> <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" /> <link rel="alternate" type="application/rss+xml" title="Zen Browser Release Notes" href="https://www.zen-browser.app/feed.xml" />
</head> </head>
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="dark"
enableSystem enableSystem
disableTransitionOnChange 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"> <div className="flex items-center justify-center flex-col">
<h1 className="text-6xl font-bold">Downloaded! ❤️</h1> <h1 className="text-6xl font-bold">Downloaded! ❤️</h1>
<p className="text-muted-foreground mt-3 text-center"> <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! web with Zen!
</p> </p>
<div className="flex font-bold mt-5 items-center justify-between mx-auto"> <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> </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>
<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'> <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" /> <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"; "use client";
import * as React from "react"; import {useEffect, useState} from "react";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { import {
@@ -12,14 +12,36 @@ import {
} from "./ui/dropdown-menu"; } from "./ui/dropdown-menu";
export function ModeToggle() { export function ModeToggle() {
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const toggleTheme = () => { 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 ( return (
<Button variant="ghost" size="icon" onClick={toggleTheme}> <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={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <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> <span className="sr-only">Toggle theme</span>
</Button> </Button>
); );