mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-07 23:19:57 +02:00
feat(header): add temporary header until designers release figma
This commit is contained in:
taroj1205
parent
056ff5ef85
commit
bd5402b857
12 changed files with 199 additions and 89 deletions
14
.prettierrc.mjs
Normal file
14
.prettierrc.mjs
Normal 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",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
34
biome.json
34
biome.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
24
pnpm-lock.yaml
generated
|
|
@ -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: {}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
19
src/components/icons/language-icon.astro
Normal file
19
src/components/icons/language-icon.astro
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%)",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue