fix(title): replace title css with tailwind

package-lock.json

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

package.json

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

src/components/Hero.astro

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

src/components/Title.astro

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

src/pages/[...locale]/404.astro

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

src/pages/[...locale]/privacy-policy.astro

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

src/utils/merge.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs))
+}