fix(title): replace title css with tailwind

This commit is contained in:
taroj1205 2025-05-16 13:47:31 +12:00
parent 966da54a29
commit a8855654be
No known key found for this signature in database
GPG key ID: 0FCB6CFFE0981AB7
7 changed files with 56 additions and 36 deletions

12
package-lock.json generated
View file

@ -21,6 +21,7 @@
"astro": "^5.7.10", "astro": "^5.7.10",
"astro-navbar": "^2.3.7", "astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14", "autoprefixer": "10.4.14",
"clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"free-astro-components": "^1.1.1", "free-astro-components": "^1.1.1",
"lucide-astro": "^0.460.0", "lucide-astro": "^0.460.0",
@ -29,6 +30,7 @@
"postcss": "^8.5.1", "postcss": "^8.5.1",
"preact": "^10.26.2", "preact": "^10.26.2",
"sharp": "^0.33.5", "sharp": "^0.33.5",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^3.4.15", "tailwindcss": "^3.4.15",
"typescript": "^5.6.3" "typescript": "^5.6.3"
}, },
@ -8405,6 +8407,16 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/tailwindcss": {
"version": "3.4.17", "version": "3.4.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",

View file

@ -27,6 +27,7 @@
"astro": "^5.7.10", "astro": "^5.7.10",
"astro-navbar": "^2.3.7", "astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14", "autoprefixer": "10.4.14",
"clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"free-astro-components": "^1.1.1", "free-astro-components": "^1.1.1",
"lucide-astro": "^0.460.0", "lucide-astro": "^0.460.0",
@ -35,6 +36,7 @@
"postcss": "^8.5.1", "postcss": "^8.5.1",
"preact": "^10.26.2", "preact": "^10.26.2",
"sharp": "^0.33.5", "sharp": "^0.33.5",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^3.4.15", "tailwindcss": "^3.4.15",
"typescript": "^5.6.3" "typescript": "^5.6.3"
}, },
@ -45,6 +47,8 @@
"wrangler": "^3.94.0" "wrangler": "^3.94.0"
}, },
"lint-staged": { "lint-staged": {
"src/**/*.{ts,tsx,astro,js,jsx}": ["biome check --write ./src"] "src/**/*.{ts,tsx,astro,js,jsx}": [
"biome check --write ./src"
]
} }
} }

View file

@ -69,13 +69,13 @@ const {
</motion.span> </motion.span>
<div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row"> <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()}> <motion.span client:load {...getHeroTitleAnimation()}>
<Button class="w-full" href={getLocalePath('/download')} isPrimary> <Button class="w-full" href={getLocalePath("/download")} isPrimary>
{hero.buttons.beta} {hero.buttons.beta}
<ArrowRightIcon class="size-4" /> <ArrowRightIcon class="size-4" />
</Button> </Button>
</motion.span> </motion.span>
<motion.span client:load {...getHeroTitleAnimation()}> <motion.span client:load {...getHeroTitleAnimation()}>
<Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button> <Button href={getLocalePath("/donate")}>{hero.buttons.support}</Button>
</motion.span> </motion.span>
</div> </div>
<motion.span <motion.span

View file

@ -1,17 +1,13 @@
--- ---
import { cn } from '~/utils/merge'
const { class: className } = Astro.props 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 /> <slot />
</h1> </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>

View file

@ -17,7 +17,9 @@ const {
<main <main
class="container flex min-h-[70vh] flex-col items-center justify-center gap-6 py-24 text-center" 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"> <div class="flex flex-col items-center gap-6">
<Description class="text-xl md:text-2xl"> <Description class="text-xl md:text-2xl">
{notFound.title} {notFound.title}
@ -25,7 +27,7 @@ const {
<p class="max-w-xl text-lg text-gray-500 dark:text-gray-400"> <p class="max-w-xl text-lg text-gray-500 dark:text-gray-400">
{notFound.description} {notFound.description}
</p> </p>
<Button href={getLocalePath('/')} isPrimary class="w-fit"> <Button href={getLocalePath("/")} isPrimary class="w-fit">
{notFound.button} {notFound.button}
</Button> </Button>
</div> </div>

View file

@ -17,9 +17,9 @@ const {
description={layout.privacyPolicy.description} description={layout.privacyPolicy.description}
> >
<main class="mx-auto mt-52 w-1/2 pb-24"> <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> <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} {privacyPolicy.sections.introduction.title}
</Title> </Title>
<p>{privacyPolicy.sections.introduction.body}</p> <p>{privacyPolicy.sections.introduction.body}</p>
@ -27,44 +27,44 @@ const {
{privacyPolicy.sections.introduction.summary} {privacyPolicy.sections.introduction.summary}
</div> </div>
<Title <Title
class="mt-16 !text-4xl font-bold" class="mt-16 text-4xl font-bold"
id="1-information-we-do-not-collect" id="1-information-we-do-not-collect"
> >
{privacyPolicy.sections.noCollect.title} {privacyPolicy.sections.noCollect.title}
</Title> </Title>
<p>{privacyPolicy.sections.noCollect.body}</p> <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" <strong class="font-bold"
>{privacyPolicy.sections.noTelemetry.title}</strong >{privacyPolicy.sections.noTelemetry.title}</strong
> >
</h3> </h3>
<p>{privacyPolicy.sections.noTelemetry.body}</p> <p>{privacyPolicy.sections.noTelemetry.body}</p>
<p>{privacyPolicy.sections.noTelemetry.body2}</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" <strong class="font-bold"
>{privacyPolicy.sections.noPersonalData.title}</strong >{privacyPolicy.sections.noPersonalData.title}</strong
> >
</h3> </h3>
<p>{privacyPolicy.sections.noPersonalData.body}</p> <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" <strong class="font-bold"
>{privacyPolicy.sections.noThirdParty.title}</strong >{privacyPolicy.sections.noThirdParty.title}</strong
> >
</h3> </h3>
<p>{privacyPolicy.sections.noThirdParty.body}</p> <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" <strong class="font-bold"
>{privacyPolicy.sections.externalConnections.title}</strong >{privacyPolicy.sections.externalConnections.title}</strong
> >
</h3> </h3>
<p>{privacyPolicy.sections.externalConnections.body}</p> <p>{privacyPolicy.sections.externalConnections.body}</p>
<Title <Title
class="mt-16 !text-4xl font-bold" class="mt-16 text-4xl font-bold"
id="2-information-stored-locally-on-your-device" id="2-information-stored-locally-on-your-device"
> >
{privacyPolicy.sections.localStorage.title} {privacyPolicy.sections.localStorage.title}
</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" <strong class="font-bold"
>{privacyPolicy.sections.browsingData.title}</strong >{privacyPolicy.sections.browsingData.title}</strong
> >
@ -81,11 +81,11 @@ const {
} }
</li> </li>
</ul> </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> <strong class="font-bold">{privacyPolicy.sections.settings.title}</strong>
</h3> </h3>
<p>{privacyPolicy.sections.settings.body}</p> <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} {privacyPolicy.sections.sync.title}
</Title> </Title>
<p>{privacyPolicy.sections.sync.body}</p> <p>{privacyPolicy.sections.sync.body}</p>
@ -105,38 +105,38 @@ const {
> >
</li> </li>
</ul> </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} {privacyPolicy.sections.addons.title}
</Title> </Title>
<p>{privacyPolicy.sections.addons.body}</p> <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} {privacyPolicy.sections.security.title}
</Title> </Title>
<p>{privacyPolicy.sections.security.body}</p> <p>{privacyPolicy.sections.security.body}</p>
<ul> <ul>
<li>{privacyPolicy.sections.security.note}</li> <li>{privacyPolicy.sections.security.note}</li>
</ul> </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} {privacyPolicy.sections.control.title}
</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" <strong class="font-bold"
>{privacyPolicy.sections.control.deletionTitle}</strong >{privacyPolicy.sections.control.deletionTitle}</strong
> >
</h3> </h3>
<p>{privacyPolicy.sections.control.deletionBody}</p> <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} {privacyPolicy.sections.website.title}
</Title> </Title>
<p>{privacyPolicy.sections.website.body}</p> <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" <strong class="font-bold"
>{privacyPolicy.sections.website.externalLinksTitle}</strong >{privacyPolicy.sections.website.externalLinksTitle}</strong
> >
</h3> </h3>
<p>{privacyPolicy.sections.website.externalLinksBody}</p> <p>{privacyPolicy.sections.website.externalLinksBody}</p>
<Title <Title
class="mt-16 !text-4xl font-bold" class="mt-16 text-4xl font-bold"
id="8-changes-to-this-privacy-policy" id="8-changes-to-this-privacy-policy"
> >
{privacyPolicy.sections.changes.title} {privacyPolicy.sections.changes.title}
@ -145,7 +145,7 @@ const {
{privacyPolicy.sections.changes.body} {privacyPolicy.sections.changes.body}
</p> </p>
<Title <Title
class="mt-16 !text-4xl font-bold" class="mt-16 text-4xl font-bold"
id="9-other-telemetry-done-by-mozilla-firefox" id="9-other-telemetry-done-by-mozilla-firefox"
> >
{privacyPolicy.sections.otherTelemetry.title} {privacyPolicy.sections.otherTelemetry.title}
@ -163,7 +163,7 @@ const {
{privacyPolicy.sections.otherTelemetry.forMoreInformation} {privacyPolicy.sections.otherTelemetry.forMoreInformation}
</li> </li>
</ul> </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} {privacyPolicy.sections.contact.title}
</Title> </Title>
<p> <p>

6
src/utils/merge.ts Normal file
View 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))
}