feat(header): add temporary header until designers release figma

This commit is contained in:
taroj1205 2024-11-04 14:45:22 +13:00
parent 056ff5ef85
commit bd5402b857
12 changed files with 199 additions and 89 deletions

14
.prettierrc.mjs Normal file
View file

@ -0,0 +1,14 @@
// .prettierrc.mjs
/** @type {import("prettier").Config} */
export default {
plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
printWidth: 80,
overrides: [
{
files: "*.astro",
options: {
parser: "astro",
},
},
],
};

View file

@ -1,34 +0,0 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false,
"defaultBranch": "main"
},
"files": {
"ignoreUnknown": false,
"ignore": []
},
"formatter": {
"enabled": true,
"indentStyle": "space"
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"nursery": {
"useSortedClasses": "info"
}
}
},
"javascript": {
"formatter": {
"quoteStyle": "double"
}
}
}

View file

@ -8,10 +8,8 @@
"build": "astro build",
"preview": "astro preview",
"astro": "astro",
"format:write": "biome format --write ./src",
"format": "biome format ./src",
"lint": "biome check ./src",
"lint:write": "biome check --fix ./src"
"format:write": "prettier --write ./src",
"format": "prettier --check ./src"
},
"devDependencies": {
"@astrojs/tailwind": "3.1.1",
@ -20,6 +18,7 @@
"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",
"tailwindcss": "3.2.7"
},

24
pnpm-lock.yaml generated
View file

@ -33,9 +33,12 @@ importers:
prettier:
specifier: ^3.3.3
version: 3.3.3
prettier-plugin-astro:
specifier: ^0.14.1
version: 0.14.1
prettier-plugin-tailwindcss:
specifier: ^0.6.8
version: 0.6.8(prettier-plugin-astro@0.7.2)(prettier@3.3.3)
version: 0.6.8(prettier-plugin-astro@0.14.1)(prettier@3.3.3)
tailwindcss:
specifier: 3.2.7
version: 3.2.7(postcss@8.4.21)
@ -52,6 +55,9 @@ packages:
'@astrojs/compiler@1.8.2':
resolution: {integrity: sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==}
'@astrojs/compiler@2.10.3':
resolution: {integrity: sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw==}
'@astrojs/language-server@0.28.3':
resolution: {integrity: sha512-fPovAX/X46eE2w03jNRMpQ7W9m2mAvNt4Ay65lD9wl1Z5vIQYxlg7Enp9qP225muTr4jSVB5QiLumFJmZMAaVA==}
hasBin: true
@ -1277,6 +1283,10 @@ packages:
resolution: {integrity: sha512-lEHd+yEm22jXdCphDrkvIJQU66EuLojPPtvZkpKIkiD+l0DMThF/niqZKJSoU8Vl7iuvtmzyMhir9LdVy5WMnA==}
engines: {node: '>=10'}
prettier-plugin-astro@0.14.1:
resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
engines: {node: ^14.15.0 || >=16.0.0}
prettier-plugin-astro@0.7.2:
resolution: {integrity: sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==}
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
@ -1819,6 +1829,8 @@ snapshots:
'@astrojs/compiler@1.8.2': {}
'@astrojs/compiler@2.10.3': {}
'@astrojs/language-server@0.28.3':
dependencies:
'@vscode/emmet-helper': 2.9.3
@ -3231,6 +3243,12 @@ snapshots:
path-exists: 4.0.0
which-pm: 2.2.0
prettier-plugin-astro@0.14.1:
dependencies:
'@astrojs/compiler': 2.10.3
prettier: 3.3.3
sass-formatter: 0.7.9
prettier-plugin-astro@0.7.2:
dependencies:
'@astrojs/compiler': 0.31.4
@ -3238,11 +3256,11 @@ snapshots:
sass-formatter: 0.7.9
synckit: 0.8.8
prettier-plugin-tailwindcss@0.6.8(prettier-plugin-astro@0.7.2)(prettier@3.3.3):
prettier-plugin-tailwindcss@0.6.8(prettier-plugin-astro@0.14.1)(prettier@3.3.3):
dependencies:
prettier: 3.3.3
optionalDependencies:
prettier-plugin-astro: 0.7.2
prettier-plugin-astro: 0.14.1
prettier@2.8.8: {}

View file

@ -1,16 +1,52 @@
<svg
class="absolute top-0 right-0 w-full h-full -z-10"
viewBox="0 0 2000 2000"
preserveAspectRatio="xMaxYMid slice"
>
<circle cx="2000" cy="1000" r="200" fill="none" stroke="rgba(147, 51, 234, 0.5)" stroke-width="1" />
<circle cx="2000" cy="1000" r="400" fill="none" stroke="rgba(147, 51, 234, 0.4)" stroke-width="1" />
<circle cx="2000" cy="1000" r="600" fill="none" stroke="rgba(147, 51, 234, 0.3)" stroke-width="1" />
<circle cx="2000" cy="1000" r="800" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" />
<circle cx="2000" cy="1000" r="1000" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" />
<circle cx="2000" cy="1000" r="1200" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" />
<!-- <circle cx="2000" cy="1000" r="1400" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="1600" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="1800" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="2000" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
</svg>
<svg
class="absolute top-0 right-0 -z-10 h-full w-full"
viewBox="0 0 2000 2000"
preserveAspectRatio="xMaxYMid slice"
>
<circle
cx="2000"
cy="1000"
r="200"
fill="none"
stroke="rgba(147, 51, 234, 0.5)"
stroke-width="1"></circle>
<circle
cx="2000"
cy="1000"
r="400"
fill="none"
stroke="rgba(147, 51, 234, 0.4)"
stroke-width="1"></circle>
<circle
cx="2000"
cy="1000"
r="600"
fill="none"
stroke="rgba(147, 51, 234, 0.3)"
stroke-width="1"></circle>
<circle
cx="2000"
cy="1000"
r="800"
fill="none"
stroke="rgba(147, 51, 234, 0.2)"
stroke-width="1"></circle>
<circle
cx="2000"
cy="1000"
r="1000"
fill="none"
stroke="rgba(147, 51, 234, 0.2)"
stroke-width="1"></circle>
<circle
cx="2000"
cy="1000"
r="1200"
fill="none"
stroke="rgba(147, 51, 234, 0.2)"
stroke-width="1"></circle>
<!-- <circle cx="2000" cy="1000" r="1400" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="1600" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="1800" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
<!-- <circle cx="2000" cy="1000" r="2000" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

View file

@ -1,20 +1,25 @@
---
import LanguageIcon from "./icons/language-icon.astro";
import Navbar from "./navbar.astro";
---
<header>
<img
alt="Zen Logo"
loading="lazy"
width="40"
height="40"
decoding="async"
data-nimg="1"
class="transition-all duration-300 hover:scale-110 mr-2"
style="color:transparent"
srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 2x"
src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg"
/>
<Navbar />
<p>Download button gonna be here</p>
<section>
<LanguageIcon class="h-6 w-6 text-primary" />
<a href="/download" class="btn-base py-2 px-4">Download Zen</a>
</section>
</header>
<style>
@tailwind base;
@layer base {
header {
@apply flex w-full items-center justify-between pt-lg;
}
section {
@apply flex items-center gap-4;
}
}
</style>

View file

@ -9,10 +9,11 @@ import DownloadIcon from "./icons/download-icon.astro";
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>
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
<p class="text-sm text-muted/95">Available on Windows, Mac, and Linux</p>
</div>
<img src="https://media.discordapp.net/attachments/1302453497651925082/1302664349655240825/nI0zVqK.png?ex=6728f037&is=67279eb7&hm=a307a77de19d56eb9165f3333a22ba5ea40e0ebb43fa1f03ecb11204ddc7e218&=&format=webp&quality=lossless&width=809&height=698" alt="Zen Logo" />
<img
src="https://media.discordapp.net/attachments/1302453497651925082/1302664349655240825/nI0zVqK.png?ex=6728f037&is=67279eb7&hm=a307a77de19d56eb9165f3333a22ba5ea40e0ebb43fa1f03ecb11204ddc7e218&=&format=webp&quality=lossless&width=809&height=698"
alt="Zen Logo"
/>
</section>

View file

@ -3,7 +3,17 @@ import { ny } from "../../lib/utils";
const { class: className } = Astro.props;
---
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={ny("w-5 h-5", className)}>
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class={ny("w-5 h-5", className)}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
></path>
</svg>

View file

@ -0,0 +1,19 @@
---
import { ny } from "../../lib/utils";
const { class: className } = Astro.props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class={ny("w-5 h-5", className)}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
></path>
</svg>

View file

@ -1 +1,34 @@
<nav></nav>
<nav>
<img
alt="Zen Logo"
loading="lazy"
width="40"
height="40"
decoding="async"
data-nimg="1"
class="mr-2 transition-all duration-300 hover:scale-110"
style="color:transparent"
srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 2x"
src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg"
/>
<ul>
<li><a href="/">Browser</a></li>
<li><a href="/resources">Resources</a></li>
<li><a href="/mods">Mods</a></li>
<li>
<a href="/donate">Donate</a>
</li>
</ul>
</nav>
<style>
@tailwind base;
@layer base {
nav {
@apply flex justify-center text-primary;
}
ul {
@apply hidden justify-center gap-4 p-4 md:flex;
}
}
</style>

View file

@ -11,24 +11,31 @@ const { title } = Astro.props;
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<!-- no search xP -->
<meta name="robots" content="noindex, nofollow, noarchive, nocache, nosnippet, noimageindex">
<meta
name="robots"
content="noindex, nofollow, noarchive, nocache, nosnippet, noimageindex"
/>
<meta name="robots" content="noindex" />
<title>{title}</title>
</head>
<body>
<div class="flex flex-col min-h-screen gap-4 items-center">
<div class="container flex min-h-screen flex-col items-center gap-4xl">
<CircleEffect />
<Header />
<main class="container py-4xl flex flex-col gap-4"><slot /></main>
<main class="flex flex-col gap-4"><slot /></main>
</div>
</body>
</html>
<style>
body {
background: linear-gradient(to bottom, rgba(147, 51, 234, 0.1), transparent 70%),
linear-gradient(to bottom, rgba(147, 51, 234, 0.05), transparent 50%),
linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%);
background-size: cover;
}
body {
background: linear-gradient(
to bottom,
rgba(147, 51, 234, 0.1),
transparent 70%
),
linear-gradient(to bottom, rgba(147, 51, 234, 0.05), transparent 50%),
linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%);
background-size: cover;
}
</style>

View file

@ -4,6 +4,7 @@ module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
container: {
center: true,
padding: {
DEFAULT: "1rem",
xs: "0.5rem",
@ -13,6 +14,7 @@ module.exports = {
"2xl": "6rem",
},
},
extend: {
colors: {
primary: "hsl(258, 48%, 23%)",