mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
fix(title): replace title css with tailwind
This commit is contained in:
taroj1205
parent
966da54a29
commit
a8855654be
7 changed files with 56 additions and 36 deletions
12
package-lock.json
generated
12
package-lock.json
generated
|
|
@ -21,6 +21,7 @@
|
|||
"astro": "^5.7.10",
|
||||
"astro-navbar": "^2.3.7",
|
||||
"autoprefixer": "10.4.14",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"free-astro-components": "^1.1.1",
|
||||
"lucide-astro": "^0.460.0",
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
"postcss": "^8.5.1",
|
||||
"preact": "^10.26.2",
|
||||
"sharp": "^0.33.5",
|
||||
"tailwind-merge": "^3.3.0",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "^5.6.3"
|
||||
},
|
||||
|
|
@ -8405,6 +8407,16 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
|
||||
"integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/dcastil"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.4.17",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
"astro": "^5.7.10",
|
||||
"astro-navbar": "^2.3.7",
|
||||
"autoprefixer": "10.4.14",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"free-astro-components": "^1.1.1",
|
||||
"lucide-astro": "^0.460.0",
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
"postcss": "^8.5.1",
|
||||
"preact": "^10.26.2",
|
||||
"sharp": "^0.33.5",
|
||||
"tailwind-merge": "^3.3.0",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "^5.6.3"
|
||||
},
|
||||
|
|
@ -45,6 +47,8 @@
|
|||
"wrangler": "^3.94.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{ts,tsx,astro,js,jsx}": ["biome check --write ./src"]
|
||||
"src/**/*.{ts,tsx,astro,js,jsx}": [
|
||||
"biome check --write ./src"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,13 +69,13 @@ const {
|
|||
</motion.span>
|
||||
<div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
<Button class="w-full" href={getLocalePath('/download')} isPrimary>
|
||||
<Button class="w-full" href={getLocalePath("/download")} isPrimary>
|
||||
{hero.buttons.beta}
|
||||
<ArrowRightIcon class="size-4" />
|
||||
</Button>
|
||||
</motion.span>
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
<Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button>
|
||||
<Button href={getLocalePath("/donate")}>{hero.buttons.support}</Button>
|
||||
</motion.span>
|
||||
</div>
|
||||
<motion.span
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
---
|
||||
import { cn } from '~/utils/merge'
|
||||
const { class: className } = Astro.props
|
||||
---
|
||||
|
||||
<h1 class:list={['title text-dark', className]}>
|
||||
<h1
|
||||
class={cn(
|
||||
"text-dark leading-[0.9] mb-[0.4rem] font-junicode font-semibold text-5xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<slot />
|
||||
</h1>
|
||||
<style>
|
||||
.title {
|
||||
line-height: 0.9;
|
||||
margin-bottom: 0.4rem;
|
||||
font-family: 'Junicode', serif;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-feature-settings: 'swsh' 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,7 +17,9 @@ const {
|
|||
<main
|
||||
class="container flex min-h-[70vh] flex-col items-center justify-center gap-6 py-24 text-center"
|
||||
>
|
||||
<Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
|
||||
<Title class="text-7xl font-bold text-coral md:text-9xl xl:text-9xl">
|
||||
404
|
||||
</Title>
|
||||
<div class="flex flex-col items-center gap-6">
|
||||
<Description class="text-xl md:text-2xl">
|
||||
{notFound.title}
|
||||
|
|
@ -25,7 +27,7 @@ const {
|
|||
<p class="max-w-xl text-lg text-gray-500 dark:text-gray-400">
|
||||
{notFound.description}
|
||||
</p>
|
||||
<Button href={getLocalePath('/')} isPrimary class="w-fit">
|
||||
<Button href={getLocalePath("/")} isPrimary class="w-fit">
|
||||
{notFound.button}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ const {
|
|||
description={layout.privacyPolicy.description}
|
||||
>
|
||||
<main class="mx-auto mt-52 w-1/2 pb-24">
|
||||
<Title id="privacy-policy">{privacyPolicy.title}</Title>
|
||||
<Title id="privacy-policy" class="xl:text-6xl">{privacyPolicy.title}</Title>
|
||||
<div class="ml-4 font-bold">{privacyPolicy.lastUpdated}</div>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="introduction">
|
||||
<Title class="mt-16 text-4xl font-bold" id="introduction">
|
||||
{privacyPolicy.sections.introduction.title}
|
||||
</Title>
|
||||
<p>{privacyPolicy.sections.introduction.body}</p>
|
||||
|
|
@ -27,44 +27,44 @@ const {
|
|||
{privacyPolicy.sections.introduction.summary}
|
||||
</div>
|
||||
<Title
|
||||
class="mt-16 !text-4xl font-bold"
|
||||
class="mt-16 text-4xl font-bold"
|
||||
id="1-information-we-do-not-collect"
|
||||
>
|
||||
{privacyPolicy.sections.noCollect.title}
|
||||
</Title>
|
||||
<p>{privacyPolicy.sections.noCollect.body}</p>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-1-1-no-telemetry-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-1-1-no-telemetry-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.noTelemetry.title}</strong
|
||||
>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.noTelemetry.body}</p>
|
||||
<p>{privacyPolicy.sections.noTelemetry.body2}</p>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-1-2-no-personal-data-collection-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-1-2-no-personal-data-collection-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.noPersonalData.title}</strong
|
||||
>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.noPersonalData.body}</p>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-1-4-no-third-party-tracking-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-1-4-no-third-party-tracking-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.noThirdParty.title}</strong
|
||||
>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.noThirdParty.body}</p>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-1-3-no-third-party-tracking-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-1-3-no-third-party-tracking-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.externalConnections.title}</strong
|
||||
>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.externalConnections.body}</p>
|
||||
<Title
|
||||
class="mt-16 !text-4xl font-bold"
|
||||
class="mt-16 text-4xl font-bold"
|
||||
id="2-information-stored-locally-on-your-device"
|
||||
>
|
||||
{privacyPolicy.sections.localStorage.title}
|
||||
</Title>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-2-1-browsing-data-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-2-1-browsing-data-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.browsingData.title}</strong
|
||||
>
|
||||
|
|
@ -81,11 +81,11 @@ const {
|
|||
}
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-2-2-settings-and-preferences-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-2-2-settings-and-preferences-">
|
||||
<strong class="font-bold">{privacyPolicy.sections.settings.title}</strong>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.settings.body}</p>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="3-sync-feature">
|
||||
<Title class="mt-16 text-4xl font-bold" id="3-sync-feature">
|
||||
{privacyPolicy.sections.sync.title}
|
||||
</Title>
|
||||
<p>{privacyPolicy.sections.sync.body}</p>
|
||||
|
|
@ -105,38 +105,38 @@ const {
|
|||
>
|
||||
</li>
|
||||
</ul>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="4-add-ons-and-mods">
|
||||
<Title class="mt-16 text-4xl font-bold" id="4-add-ons-and-mods">
|
||||
{privacyPolicy.sections.addons.title}
|
||||
</Title>
|
||||
<p>{privacyPolicy.sections.addons.body}</p>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="5-data-security">
|
||||
<Title class="mt-16 text-4xl font-bold" id="5-data-security">
|
||||
{privacyPolicy.sections.security.title}
|
||||
</Title>
|
||||
<p>{privacyPolicy.sections.security.body}</p>
|
||||
<ul>
|
||||
<li>{privacyPolicy.sections.security.note}</li>
|
||||
</ul>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="6-your-control">
|
||||
<Title class="mt-16 text-4xl font-bold" id="6-your-control">
|
||||
{privacyPolicy.sections.control.title}
|
||||
</Title>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-6-1-data-deletion-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-6-1-data-deletion-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.control.deletionTitle}</strong
|
||||
>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.control.deletionBody}</p>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="7-our-website-and-services">
|
||||
<Title class="mt-16 text-4xl font-bold" id="7-our-website-and-services">
|
||||
{privacyPolicy.sections.website.title}
|
||||
</Title>
|
||||
<p>{privacyPolicy.sections.website.body}</p>
|
||||
<h3 class="mt-4 text-xl !font-bold" id="-7-1-external-links-">
|
||||
<h3 class="mt-4 text-xl font-bold" id="-7-1-external-links-">
|
||||
<strong class="font-bold"
|
||||
>{privacyPolicy.sections.website.externalLinksTitle}</strong
|
||||
>
|
||||
</h3>
|
||||
<p>{privacyPolicy.sections.website.externalLinksBody}</p>
|
||||
<Title
|
||||
class="mt-16 !text-4xl font-bold"
|
||||
class="mt-16 text-4xl font-bold"
|
||||
id="8-changes-to-this-privacy-policy"
|
||||
>
|
||||
{privacyPolicy.sections.changes.title}
|
||||
|
|
@ -145,7 +145,7 @@ const {
|
|||
{privacyPolicy.sections.changes.body}
|
||||
</p>
|
||||
<Title
|
||||
class="mt-16 !text-4xl font-bold"
|
||||
class="mt-16 text-4xl font-bold"
|
||||
id="9-other-telemetry-done-by-mozilla-firefox"
|
||||
>
|
||||
{privacyPolicy.sections.otherTelemetry.title}
|
||||
|
|
@ -163,7 +163,7 @@ const {
|
|||
{privacyPolicy.sections.otherTelemetry.forMoreInformation}
|
||||
</li>
|
||||
</ul>
|
||||
<Title class="mt-16 !text-4xl font-bold" id="10-contact-us">
|
||||
<Title class="mt-16 text-4xl font-bold" id="10-contact-us">
|
||||
{privacyPolicy.sections.contact.title}
|
||||
</Title>
|
||||
<p>
|
||||
|
|
|
|||
6
src/utils/merge.ts
Normal file
6
src/utils/merge.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export const cn = (...inputs: ClassValue[]) => {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue