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-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",

View file

@ -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"
]
}
}

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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
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))
}