Merge pull request #8 from taroj1205/feat/how-much

Added how much browser do you want section
This commit is contained in:
NOCanoa 2024-11-11 09:34:25 +00:00 committed by GitHub
commit 3d19ff0186
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 2360 additions and 1537 deletions

1
.astro/types.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="astro/client" />

4
.gitignore vendored
View file

@ -1 +1,3 @@
node_modules
node_modules
.astro/settings.json
dist

View file

@ -3,29 +3,35 @@
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"dev": "astro dev --port 3000",
"start": "astro preview --port 3000",
"build": "astro build",
"preview": "astro preview",
"preview": "astro preview --port 3000",
"astro": "astro",
"format:write": "prettier --write ./src",
"format": "prettier --check ./src"
},
"devDependencies": {
"@astrojs/tailwind": "3.1.1",
"astro": "2.1.3",
"@astrojs/tailwind": "5.1.2",
"astro": "4.16.10",
"autoprefixer": "10.4.14",
"postcss": "8.4.21",
"postcss-import": "^16.1.0",
"prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.6.8",
"sharp": "^0.33.5",
"tailwindcss": "3.2.7"
},
"dependencies": {
"@astrojs/react": "^3.6.2",
"@fontsource/dm-sans": "^5.1.0",
"@fontsource/inter": "^5.1.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"clsx": "^2.1.1",
"react": "^19.0.0-beta",
"react-dom": "^19.0.0-beta",
"tailwind-merge": "^2.5.4"
}
}

3142
pnpm-lock.yaml generated

File diff suppressed because it is too large Load diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/glance.webm Normal file

Binary file not shown.

1
public/placeholder.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/assets/modes/split.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View file

@ -0,0 +1,24 @@
<input
type="color"
id="themeColor"
value="#f98175"
class="cursor-pointer rounded border-none bg-transparent"
aria-label="Theme color"
/>
<script>
const colorInput = document.querySelector("#themeColor") as HTMLInputElement;
colorInput?.addEventListener("input", (e) => {
const color = (e.target as HTMLInputElement).value;
document.documentElement.style.setProperty("--primary", color);
});
</script>
<style>
@tailwind base;
@layer base {
#themeColor {
@apply fixed top-1/2 right-2 h-10 w-10 appearance-none;
}
}
</style>

View file

@ -0,0 +1,8 @@
---
import { ny } from "@/lib/utils";
const { class: className } = Astro.props;
---
<a href="/download" class={ny("btn-base", className)} draggable="false">
<slot /></a
>

View file

@ -0,0 +1,13 @@
<footer>
<p>Work in progress - coming soon</p>
</footer>
<style>
@tailwind base;
@layer base {
footer {
@apply relative h-40 w-full bg-primary;
}
}
</style>

View file

@ -0,0 +1,29 @@
---
import Download from "./download.astro";
---
<section id="glance">
<h3>Introducing Zen <span class="highlight">Glance</span> 👀</h3>
<p class="description">
Zen's glance feature allows you to quickly preview a website without leaving
your current page. It's perfect for checking out links before you click on
them, saving you time and hassle
</p>
<Download class="bg-primary font-normal text-white"
>What are you waiting for?</Download
>
<video src="./glance.webm" autoplay loop muted></video>
</section>
<style>
@tailwind base;
@layer base {
#glance {
@apply section flex flex-col items-center gap-md py-20;
}
#glance video {
@apply w-full rounded-lg;
}
}
</style>

View file

@ -1,4 +1,5 @@
---
import Download from "./download.astro";
import DownloadIcon from "./icons/download-icon.astro";
import LanguageIcon from "./icons/language-icon.astro";
import Navbar from "./navbar.astro";
@ -7,8 +8,10 @@ import Navbar from "./navbar.astro";
<header>
<Navbar />
<section>
<LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
<a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
<LanguageIcon class="dark:text-secondary-dark h-7 w-7 text-secondary" />
<Download class="py-2 font-semibold"
><DownloadIcon strokeWidth="2.5" />v1.0.1-a.17</Download
>
</section>
</header>
@ -20,7 +23,7 @@ import Navbar from "./navbar.astro";
}
section {
@apply flex items-center gap-4;
@apply flex items-center gap-10;
}
}
</style>

View file

@ -1,28 +1,61 @@
---
// src/components/hero.astro
import DownloadIcon from "./icons/download-icon.astro";
import '@fontsource/dm-sans/700.css';
import browserImage from "@/assets/Redrawn_v1_Barebones.png";
import "@fontsource/dm-sans/700.css";
import { Image } from "astro:assets";
import Download from "./download.astro";
---
<section id="hero" class="section flex flex-col md:flex-row gap-md items-center">
<div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
<h2 class="md:text-center drop-shadow-md">Stay focused, browse faster</h2>
<p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
Zen is beautifully designed, privacy-focused, and packed with features. We
care about your experience, not your data.
</p>
<div class="center flex flex-col gap-sm">
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
</div>
<section id="hero">
<h2>Stay focused, browse faster</h2>
<p class="description">
Zen is beautifully designed, privacy-focused, and packed with features. We
care about your experience, not your data.
</p>
<div class="download">
<Download><DownloadIcon /> Download Zen</Download>
<p>Available on Windows, Mac, and Linux</p>
</div>
<div class="hero__image">
<Image src={browserImage} alt="Zen Logo" />
<figcaption>
Your experience using Zen may change over time, as new features are added,
improved and adjusted with upstream Firefox updates. User discretion is
advised.
</figcaption>
</div>
<div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
<img
src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
alt="Zen Logo"
class="w-full rounded-lg drop-shadow-glow"
/>
<figcaption class="text-md text-muted/95">
Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
</figcaption>
</div>
</section>
<style>
@tailwind base;
@layer base {
section {
@apply section flex flex-col items-center gap-md py-20;
}
h2 {
@apply drop-shadow-md md:text-center;
}
.download {
@apply center flex flex-col gap-sm;
}
.download p {
@apply text-muted/95;
}
.hero__image {
@apply flex flex-1 flex-col gap-4;
}
img {
@apply w-full rounded-lg;
}
figcaption {
@apply text-muted/95;
}
}
</style>

View file

@ -0,0 +1,271 @@
---
import { Image } from "astro:assets";
import compactImage from "@/assets/modes/compact.png";
import collapsedImage from "@/assets/modes/collapsed.png";
import standardImage from "@/assets/modes/standard.png";
import splitImage from "@/assets/modes/split.png";
type ModesOptions = "compact" | "collapsed" | "standard" | "split";
const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
---
<section id="how-much">
<div>
<h3>
How <span class="highlight">much</span> browser do you want?
</h3>
<fieldset id="radio-group">
<legend class="sr-only">Choose a view</legend>
{
modes.map((mode) => (
<label for={mode}>
<input
type="radio"
id={mode}
name="view"
value={mode}
checked={mode === "compact"}
class="sr-only"
/>
<span>{mode.charAt(0).toUpperCase() + mode.slice(1)}</span>
</label>
))
}
</fieldset>
<div id="slider-container">
<span id="slider-value">🌱</span>
<input
type="range"
id="view-slider"
min="0"
max="3"
value="0"
class="w-full"
/>
<span id="slider-value">🌳</span>
</div>
</div>
<div id="image-container">
<div id="image-wrapper">
{
modes.map((mode, index) => (
<Image
src={
[compactImage, collapsedImage, standardImage, splitImage][index]
}
alt={`${mode} browser view`}
id={mode}
/>
))
}
</div>
<div id="carousel-indicators">
{
modes.map((_, index) => (
<span
class:list={["indicator", { active: index === 0 }]}
data-index={index}
/>
))
}
</div>
</div>
</section>
<script>
const radioButtons = document.querySelectorAll('input[name="view"]');
const radioGroup = document.getElementById("radio-group") as HTMLElement;
const labels = radioGroup.querySelectorAll("label");
const imageWrapper = document.getElementById("image-wrapper") as HTMLElement;
const indicators = document.querySelectorAll(".indicator");
const modeOrder = ["compact", "collapsed", "standard", "split"];
let currentIndex = 0;
const slider = document.getElementById("view-slider") as HTMLInputElement;
function updateImages(selectedMode: string) {
const selectedIndex = modeOrder.indexOf(selectedMode);
currentIndex = selectedIndex;
const offset = selectedIndex * -100;
const mediaQuery = window.matchMedia("(min-width: 1280px)");
if (mediaQuery.matches) {
imageWrapper.style.transform = `translateY(${offset}%)`;
} else {
imageWrapper.style.transform = `translateX(${offset}%)`;
}
updateIndicators();
updateRadioButtons();
updateSlider();
}
function updateIndicators() {
indicators.forEach((indicator, index) => {
if (index === currentIndex) {
indicator.classList.add("active");
} else {
indicator.classList.remove("active");
}
});
}
function updateRadioButtons() {
const selectedRadio = document.querySelector(
`input[value="${modeOrder[currentIndex]}"]`,
) as HTMLInputElement;
if (selectedRadio) {
selectedRadio.checked = true;
}
}
function updateSlider() {
slider.value = currentIndex.toString();
}
radioButtons.forEach((radio) => {
radio.addEventListener("change", (e) => {
if (e.target instanceof HTMLInputElement && e.target.checked) {
updateImages(e.target.value);
}
});
});
labels.forEach((label) => {
label.addEventListener("mouseenter", (e) => {
if (e.target instanceof HTMLLabelElement) {
const input = e.target.querySelector("input") as HTMLInputElement;
if (input) {
input.checked = true;
updateImages(input.value);
}
}
});
});
indicators.forEach((indicator, index) => {
indicator.addEventListener("click", () => {
updateImages(modeOrder[index]);
});
indicator.addEventListener("mouseenter", () => {
updateImages(modeOrder[index]);
});
});
slider.addEventListener("input", () => {
updateImages(modeOrder[parseInt(slider.value)]);
});
let startX = 0;
let currentX = 0;
let isDragging = false;
imageWrapper.addEventListener("touchstart", (e) => {
startX = e.touches[0].clientX;
isDragging = true;
imageWrapper.style.transition = "none";
});
imageWrapper.addEventListener("touchmove", (e) => {
currentX = e.touches[0].clientX;
const deltaX = (currentX - startX) / 4;
const newTranslateX = deltaX + currentIndex * -100;
const maxTranslateX = (modeOrder.length - 1) * -100;
if (newTranslateX <= 10 && newTranslateX >= maxTranslateX - 10) {
imageWrapper.style.transform = `translateX(${newTranslateX}%)`;
}
});
imageWrapper.addEventListener("touchend", () => {
isDragging = false;
imageWrapper.style.transition = "transform 0.3s ease-in-out";
const deltaX = currentX - startX;
if (deltaX > 50 && currentIndex > 0) {
updateImages(modeOrder[currentIndex - 1]);
} else if (deltaX < -50 && currentIndex < modeOrder.length - 1) {
updateImages(modeOrder[currentIndex + 1]);
} else {
updateImages(modeOrder[currentIndex]);
}
});
imageWrapper.addEventListener("wheel", (e) => {
if (e.deltaY < 0 && currentIndex > 0) {
e.preventDefault();
updateImages(modeOrder[currentIndex - 1]);
} else if (e.deltaY > 0 && currentIndex < modeOrder.length - 1) {
e.preventDefault();
updateImages(modeOrder[currentIndex + 1]);
}
});
</script>
<style>
@tailwind base;
@layer base {
section {
@apply grid w-full grid-cols-1 justify-center xl:grid-cols-[1fr_2fr] xl:gap-8;
}
section > div {
@apply flex flex-col gap-md rounded-lg py-6;
}
label {
@apply flex cursor-pointer items-center gap-3 rounded-lg p-3 hover:bg-primary hover:text-white;
}
label:has(input:checked) {
@apply bg-primary text-white;
}
label span {
@apply text-lg;
}
#image-container {
@apply relative aspect-[1.55/1] overflow-clip rounded-lg;
}
#image-wrapper {
@apply absolute inset-0 flex flex-row transition-transform duration-300 ease-in-out xl:flex-col;
}
img {
@apply aspect-[1.55/1] bg-[#272626] object-cover first:rounded-l-lg last:rounded-r-lg;
}
#radio-group {
@apply hidden flex-col xl:flex;
}
#carousel-indicators {
@apply absolute flex -translate-x-1/2 transform gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col -xl:bottom-4 -xl:left-1/2;
}
.indicator {
@apply h-3 w-3 cursor-pointer rounded-full bg-primary bg-opacity-50 transition-all duration-300 ease-in-out;
}
.indicator.active {
@apply w-8 bg-opacity-100 xl:h-8 xl:w-3;
}
#slider-container {
@apply grid w-full max-w-xl grid-cols-[auto_1fr_auto] gap-md place-self-center xl:hidden;
}
#view-slider {
@apply w-full;
}
#slider-labels {
@apply text-xs;
}
}
</style>

View file

@ -0,0 +1,17 @@
---
import { ny } from "../../lib/utils";
const { class: className } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={ny("w-5 h-5", className)}><path d="m15 18-6-6 6-6"></path></svg
>

View file

@ -0,0 +1,17 @@
---
import { ny } from "../../lib/utils";
const { class: className } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={ny("w-5 h-5", className)}><path d="m9 18 6-6-6-6"></path></svg
>

View file

@ -1,15 +1,16 @@
---
import { ny } from "../../lib/utils";
const { class: className } = Astro.props;
const { class: className, strokeWidth = "1.5", ...props } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke-width={strokeWidth}
stroke="currentColor"
class={ny("w-5 h-5", className)}
{...props}
>
<path
stroke-linecap="round"

View file

@ -0,0 +1,57 @@
---
import { ny } from "../../lib/utils";
const { class: className, ...props } = Astro.props;
---
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 80 80"
class={ny("w-5 h-5", className)}
{...props}
><defs
><style>
.g {
fill: var(--primary);
}
.g,
.h,
.i {
stroke-width: 0px;
}
.h {
fill: url(#e);
}
.i {
fill: #fef9fe;
}
</style><linearGradient
id="e"
x1="40"
y1="80"
x2="40"
y2="0"
gradientUnits="userSpaceOnUse"
><stop offset=".1" stop-color="#fff" stop-opacity=".02"></stop><stop
offset=".9"
stop-color="#fff"
stop-opacity=".1"></stop></linearGradient
></defs
><g id="c"
><rect class="g" width="80" height="80" rx="18.25" ry="18.25"></rect></g
><g id="d"
><rect class="h" width="80" height="80" rx="18.25" ry="18.25"></rect></g
><g id="f"
><path
class="i"
d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"
></path><path
class="i"
d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"
></path><path
class="i"
d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"
></path></g
></svg
>

View file

@ -1,24 +1,20 @@
---
import ZenIcon from "./icons/zen-icon.astro";
---
<nav>
<a
href="/"
>
<img
alt="Zen Logo"
loading="lazy"
width="40"
height="40"
decoding="async"
data-nimg="1"
srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg 2x"
src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg"
/>
<a href="/">
<ZenIcon class="h-10 w-10 fill-primary" />
</a>
<ul>
<li><a href="/">Browser</a></li>
<li><a href="https://docs.zen-browser.app/">Resources</a></li>
<li><a href="https://zen-browser.app/mods">Mods</a></li>
<li>
<a href="https://www.patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink">Donate</a>
<a
href="https://www.patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
>Donate</a
>
</li>
</ul>
</nav>
@ -27,10 +23,10 @@
@tailwind base;
@layer base {
nav {
@apply flex justify-center gap-10 text-primary font-semibold text-lg;
@apply flex justify-center gap-10 text-lg font-semibold text-secondary;
}
ul {
@apply hidden items-center justify-center gap-10 md:flex drop-shadow-md;
@apply hidden items-center justify-center gap-10 drop-shadow-md md:flex;
}
}
</style>

View file

@ -0,0 +1,61 @@
<section id="why-zen">
<h3>Why Zen?</h3>
<table class="comparison-table">
<thead>
<tr>
<th></th>
<th>Zen</th>
<th>Arc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Customization</td>
<td>◯</td>
<td>✗</td>
</tr>
<tr>
<td>Open Source</td>
<td>◯</td>
<td>✗</td>
</tr>
<tr>
<td>Privacy</td>
<td>◯</td>
<td>✗</td>
</tr>
<tr>
<td>Ad block</td>
<td>◯</td>
<td>△*</td>
</tr>
</tbody>
</table>
</section>
<style>
@tailwind base;
@layer base {
#why-zen {
@apply flex flex-col gap-4 p-6;
}
table {
@apply w-full max-w-2xl border-collapse text-left;
}
th,
td {
@apply border border-gray-300 px-4 py-2 text-3xl;
}
th {
@apply bg-gray-100 text-center;
}
td {
@apply text-center;
}
}
</style>

1
src/env.d.ts vendored
View file

@ -1 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

View file

@ -1,8 +1,10 @@
---
import CircleEffect from "../components/circle-effect.astro";
import Header from "../components/header.astro";
import Footer from "../components/footer.astro";
const { title } = Astro.props;
import '@fontsource/inter';
import "@fontsource/inter";
import ColorChange from "@/components/color-change.astro";
---
<html lang="en">
@ -21,21 +23,31 @@ import '@fontsource/inter';
<body>
<div class="container flex min-h-screen flex-col items-center gap-y-4xl">
<CircleEffect />
<div
class="absolute inset-0 -z-10 bg-gradient-to-b from-primary/20 to-transparent"
>
</div>
<Header />
<main class="flex w-full flex-col gap-4"><slot /></main>
<main class="flex w-full flex-col gap-40"><slot /></main>
</div>
<Footer />
<ColorChange />
</body>
</html>
<style>
body {
background: linear-gradient(
to bottom,
hsla(22, 96%, 60%, 0.1),
transparent 70%
),
linear-gradient(to bottom, hsla(22, 96%, 60%, 0.05), transparent 50%),
linear-gradient(to bottom, hsla(22, 96%, 60%, 0.03), transparent 30%);
background-size: cover;
<style is:global>
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
:root {
--primary: hsl(6, 96%, 70%);
}
</style>

View file

@ -10,8 +10,10 @@ import Layout from "../layouts/main.astro";
device you're using. This will only take a moment, we promise.
</p>
<div>
<h3 class="text-4xl font-semibold text-primary">Platform</h3>
<p class="text-muted">Choose the platform you want to download Zen for:</p>
<h3 class="text-4xl font-semibold text-secondary">Platform</h3>
<p class="text-muted">
Choose the platform you want to download Zen for:
</p>
</div>
</section>
</Layout>

View file

@ -1,8 +1,14 @@
---
import Hero from "../components/hero.astro";
import Layout from "../layouts/main.astro";
import HowMuch from "@/components/how-much.astro";
import Hero from "@/components/hero.astro";
import Layout from "@/layouts/main.astro";
import Glance from "@/components/glance.astro";
// import WhyZen from "@/components/why-zen.astro";
---
<Layout title="Zen Browser">
<Hero />
<HowMuch />
<Glance />
<!-- <WhyZen /> -->
</Layout>

View file

@ -16,8 +16,11 @@ module.exports = {
},
extend: {
colors: {
primary: "hsl(22, 96%, 60%)",
muted: "hsl(22, 96%, 70%)",
// secondary: "hsl(258, 48%, 23%)",
secondary: "hsl(0, 0%, 20%)",
// primary: "hsl(6, 96%, 70%)",
primary: "var(--primary)",
muted: "hsl(0, 0%, 30%)",
},
spacing: {
xs: "0.5rem",
@ -34,9 +37,6 @@ module.exports = {
"8xl": "10rem",
"9xl": "11rem",
},
fontSize: {
"scale-large": "clamp(3rem, 6vw, 4rem)",
},
fontFamily: {
sans: [
"Inter",
@ -50,20 +50,36 @@ module.exports = {
],
dm: ["DM Sans"],
},
dropShadow: {
glow: [
"0 0px 5px hsla(22, 96%, 60%, 0.90)",
"0 0px 20px hsla(22, 96%, 60%, 0.75)"
]
}
fontSize: {
"scale-sm": "clamp(1rem, 2vw, 1.5rem)",
"scale-md": "clamp(1.5rem, 3vw, 2rem)",
"scale-lg": "clamp(3rem, 6vw, 4rem)",
"scale-xl": "clamp(4rem, 8vw, 5rem)",
"scale-2xl": "clamp(5rem, 10vw, 6rem)",
"scale-3xl": "clamp(6rem, 12vw, 7rem)",
},
screens: {
"-sm": { max: "639px" },
"-md": { max: "767px" },
"-lg": { max: "1023px" },
"-xl": { max: "1279px" },
"-2xl": { max: "1535px" },
},
},
},
plugins: [
plugin(({ addBase, addComponents, addUtilities, theme }) => {
addBase({
h2: {
"@apply text-scale-large font-bold text-primary": {},
fontSize: `clamp(${theme("fontSize.6xl")}, 10vw, calc(${theme("fontSize.6xl")} + 1rem))`,
"@apply font-bold text-secondary leading-none": {},
},
h3: {
fontSize: `clamp(${theme("fontSize.4xl")}, 10vw, calc(${theme("fontSize.4xl")} + 1rem))`,
"@apply font-bold text-secondary leading-none": {},
},
p: {
"@apply text-secondary": {},
},
});
addComponents({
@ -74,12 +90,18 @@ module.exports = {
alignItems: "center",
textAlign: "center",
},
".highlight": {
color: theme("colors.primary"),
},
".center": {
"@apply text-center place-items-center": {},
},
".btn-base": {
"@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white dark:text-black":
"@apply text-white py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 bg-primary":
{},
},
".description": {
"@apply max-w-prose text-xl text-muted drop-shadow-sm md:text-center":
{},
},
});

View file

@ -1,3 +1,13 @@
{
"extends": "astro/tsconfigs/base"
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
},
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}