mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-08 19:29:58 +02:00
Merge pull request #5 from taroj1205/refactor/styles
Made slight improvement to styling
This commit is contained in:
commit
571cf9f863
7 changed files with 56 additions and 19 deletions
|
@ -23,6 +23,8 @@
|
||||||
"tailwindcss": "3.2.7"
|
"tailwindcss": "3.2.7"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fontsource/dm-sans": "^5.1.0",
|
||||||
|
"@fontsource/inter": "^5.1.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"tailwind-merge": "^2.5.4"
|
"tailwind-merge": "^2.5.4"
|
||||||
}
|
}
|
||||||
|
|
16
pnpm-lock.yaml
generated
16
pnpm-lock.yaml
generated
|
@ -8,6 +8,12 @@ importers:
|
||||||
|
|
||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@fontsource/dm-sans':
|
||||||
|
specifier: ^5.1.0
|
||||||
|
version: 5.1.0
|
||||||
|
'@fontsource/inter':
|
||||||
|
specifier: ^5.1.0
|
||||||
|
version: 5.1.0
|
||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
|
@ -312,6 +318,12 @@ packages:
|
||||||
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
|
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
|
|
||||||
|
'@fontsource/dm-sans@5.1.0':
|
||||||
|
resolution: {integrity: sha512-YpGtZ8Rbh+/84rn7o/rzBBFnikoLjhjtzKYAMZhSRr7xWU0piZDBFhUdI14M4Ub8emh0TSG/gU2pJOMUe9TGYA==}
|
||||||
|
|
||||||
|
'@fontsource/inter@5.1.0':
|
||||||
|
resolution: {integrity: sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==}
|
||||||
|
|
||||||
'@jridgewell/gen-mapping@0.3.5':
|
'@jridgewell/gen-mapping@0.3.5':
|
||||||
resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
|
resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
|
||||||
engines: {node: '>=6.0.0'}
|
engines: {node: '>=6.0.0'}
|
||||||
|
@ -2095,6 +2107,10 @@ snapshots:
|
||||||
|
|
||||||
'@fastify/busboy@2.1.1': {}
|
'@fastify/busboy@2.1.1': {}
|
||||||
|
|
||||||
|
'@fontsource/dm-sans@5.1.0': {}
|
||||||
|
|
||||||
|
'@fontsource/inter@5.1.0': {}
|
||||||
|
|
||||||
'@jridgewell/gen-mapping@0.3.5':
|
'@jridgewell/gen-mapping@0.3.5':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/set-array': 1.2.1
|
'@jridgewell/set-array': 1.2.1
|
||||||
|
|
|
@ -6,8 +6,8 @@ import Navbar from "./navbar.astro";
|
||||||
<header>
|
<header>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<section>
|
<section>
|
||||||
<LanguageIcon class="h-6 w-6 text-primary" />
|
<LanguageIcon class="h-7 w-7 text-primary" />
|
||||||
<a href="/download" class="btn-base py-2 px-4">Download Zen</a>
|
<a href="/download" class="btn-base py-2">Download Zen</a>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ import Navbar from "./navbar.astro";
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@layer base {
|
@layer base {
|
||||||
header {
|
header {
|
||||||
@apply flex w-full items-center justify-between pt-lg;
|
@apply flex w-full items-center justify-between pt-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
|
|
|
@ -1,19 +1,24 @@
|
||||||
---
|
---
|
||||||
import DownloadIcon from "./icons/download-icon.astro";
|
import DownloadIcon from "./icons/download-icon.astro";
|
||||||
|
import '@fontsource/dm-sans/700.css';
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="hero" class="section">
|
<section id="hero" class="section">
|
||||||
<h2>Stay focused, browse faster</h2>
|
<h2>Stay focused, browse faster</h2>
|
||||||
<p class="max-w-prose text-lg text-muted">
|
<p class="max-w-prose text-xl text-muted">
|
||||||
Zen is beautifully designed, privacy-focused, and packed with features. We
|
Zen is beautifully designed, privacy-focused, and packed with features. We
|
||||||
care about your experience, not your data.
|
care about your experience, not your data.
|
||||||
</p>
|
</p>
|
||||||
<div class="center flex flex-col gap-sm">
|
<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>
|
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<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"
|
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"
|
alt="Zen Logo"
|
||||||
|
class="w-full rounded-lg drop-shadow-2xl"
|
||||||
/>
|
/>
|
||||||
|
<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>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -6,8 +6,6 @@
|
||||||
height="40"
|
height="40"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
data-nimg="1"
|
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"
|
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"
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg"
|
||||||
/>
|
/>
|
||||||
|
@ -25,10 +23,10 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@layer base {
|
@layer base {
|
||||||
nav {
|
nav {
|
||||||
@apply flex justify-center text-primary;
|
@apply flex justify-center text-primary font-semibold text-lg gap-4;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
@apply hidden justify-center gap-4 p-4 md:flex;
|
@apply hidden justify-center gap-8 p-4 md:flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
import CircleEffect from "../components/circle-effect.astro";
|
import CircleEffect from "../components/circle-effect.astro";
|
||||||
import Header from "../components/header.astro";
|
import Header from "../components/header.astro";
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
|
import '@fontsource/inter';
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
@ -22,7 +22,7 @@ const { title } = Astro.props;
|
||||||
<div class="container flex min-h-screen flex-col items-center gap-4xl">
|
<div class="container flex min-h-screen flex-col items-center gap-4xl">
|
||||||
<CircleEffect />
|
<CircleEffect />
|
||||||
<Header />
|
<Header />
|
||||||
<main class="flex flex-col gap-4"><slot /></main>
|
<main class="flex flex-col gap-4 w-full"><slot /></main>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -6,7 +6,7 @@ module.exports = {
|
||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
padding: {
|
padding: {
|
||||||
DEFAULT: "1rem",
|
DEFAULT: "2rem",
|
||||||
xs: "0.5rem",
|
xs: "0.5rem",
|
||||||
sm: "2rem",
|
sm: "2rem",
|
||||||
lg: "4rem",
|
lg: "4rem",
|
||||||
|
@ -14,7 +14,6 @@ module.exports = {
|
||||||
"2xl": "6rem",
|
"2xl": "6rem",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: "hsl(258, 48%, 23%)",
|
primary: "hsl(258, 48%, 23%)",
|
||||||
|
@ -35,13 +34,29 @@ module.exports = {
|
||||||
"8xl": "10rem",
|
"8xl": "10rem",
|
||||||
"9xl": "11rem",
|
"9xl": "11rem",
|
||||||
},
|
},
|
||||||
|
fontSize: {
|
||||||
|
"scale-large": "clamp(3rem, 6vw, 4rem)",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: [
|
||||||
|
"Inter",
|
||||||
|
"ui-sans-serif",
|
||||||
|
"system-ui",
|
||||||
|
"sans-serif",
|
||||||
|
'"Apple Color Emoji"',
|
||||||
|
'"Segoe UI Emoji"',
|
||||||
|
'"Segoe UI Symbol"',
|
||||||
|
'"Noto Color Emoji"',
|
||||||
|
],
|
||||||
|
dm: ["DM Sans"],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
plugin(({ addBase, addComponents, addUtilities, theme }) => {
|
plugin(({ addBase, addComponents, addUtilities, theme }) => {
|
||||||
addBase({
|
addBase({
|
||||||
h2: {
|
h2: {
|
||||||
"@apply text-7xl font-bold text-primary": {},
|
"@apply text-scale-large font-bold text-primary": {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
addComponents({
|
addComponents({
|
||||||
|
@ -50,12 +65,13 @@ module.exports = {
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: theme("spacing.md"),
|
gap: theme("spacing.md"),
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
".center": {
|
".center": {
|
||||||
"@apply text-center place-items-center": {},
|
"@apply text-center place-items-center": {},
|
||||||
},
|
},
|
||||||
".btn-base": {
|
".btn-base": {
|
||||||
"@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2":
|
"@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":
|
||||||
{},
|
{},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue