fix: linter issues and remove style tag

src/components/Footer.astro

@@ -15,7 +15,7 @@ const {
 
 <footer
   id="footer"
-  class="relative flex w-full flex-col items-center gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24"
+  class="border-dark bg-dark text-paper relative flex w-full flex-col items-center gap-16 overflow-hidden border-t px-4 py-12 lg:p-24"
   role="contentinfo"
   aria-label="Site footer"
 >
@@ -24,7 +24,7 @@ const {
       class="flex w-full flex-col gap-4 text-center lg:w-1/2 lg:text-left"
       aria-labelledby="footer-title"
     >
-      <Description id="footer-title" class="text-6xl font-bold !text-paper"
+      <Description id="footer-title" class="!text-paper text-6xl font-bold"
         >{footer.title}</Description
       >
       <Description class="mx-auto max-w-xl lg:mx-0">
@@ -35,7 +35,7 @@ const {
       <Button
         href="/download"
         isPrimary
-        class="h-fit w-fit bg-paper !text-dark"
+        class="bg-paper !text-dark h-fit w-fit"
         aria-label={footer.download}
       >
         {footer.download}
@@ -128,8 +128,8 @@ const {
         set:html={footer.madeWith.replace('{link}', getLocalePath('/about'))}
       />
     </section>
-    <section class="absolute bottom-0 right-0">
+    <section class="absolute right-0 bottom-0">
-      <Circles white multiplier={0.7} class="mb-[-100px] ml-auto mr-[-80px] hidden lg:block" />
+      <Circles white multiplier={0.7} class="mr-[-80px] mb-[-100px] ml-auto hidden lg:block" />
     </section>
   </div>
 </footer>

src/components/Hero.astro

@@ -42,7 +42,7 @@ const {
             <motion.span
               client:load
               {...getHeroTitleAnimation()}
-              className={title.highlight ? 'italic text-coral' : ''}
+              className={title.highlight ? 'text-coral italic' : ''}
             >
               {title.text}
             </motion.span>

src/components/MobileMenu.astro

@@ -16,12 +16,12 @@ const {
 <!-- Mobile Slide Menu -->
 <div
   id="mobile-menu"
-  class="fixed inset-y-0 right-0 z-40 w-64 translate-x-full transform bg-paper shadow-lg transition-transform duration-300 peer-checked:translate-x-0 lg:hidden"
+  class="bg-paper fixed inset-y-0 right-0 z-40 w-64 translate-x-full transform shadow-lg transition-transform duration-300 peer-checked:translate-x-0 lg:hidden"
 >
-  <div class="flex items-center justify-between border-b border-dark px-4 py-2">
+  <div class="border-dark flex items-center justify-between border-b px-4 py-2">
     <div class="text-lg font-bold">{menu.menu}</div>
     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-    <label for="mobile-menu-toggle" class="cursor-pointer p-2 text-dark">
+    <label for="mobile-menu-toggle" class="text-dark cursor-pointer p-2">
       <span class="sr-only">Close menu</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -46,17 +46,17 @@ const {
         <div class="mb-2 font-bold">{menu.gettingStarted}</div>
         <ul class="ml-4 space-y-2">
           <li>
-            <a href={getLocalePath('/mods')} class="block text-dark hover:text-coral"
+            <a href={getLocalePath('/mods')} class="text-dark hover:text-coral block"
               >{menu.zenMods}</a
             >
           </li>
           <li>
-            <a href={getLocalePath('/release-notes')} class="block text-dark hover:text-coral"
+            <a href={getLocalePath('/release-notes')} class="text-dark hover:text-coral block"
               >{menu.releaseNotes}</a
             >
           </li>
           <li>
-            <a href="https://discord.gg/zen-browser" class="block text-dark hover:text-coral"
+            <a href="https://discord.gg/zen-browser" class="text-dark hover:text-coral block"
               >{menu.discord}</a
             >
           </li>
@@ -67,17 +67,17 @@ const {
         <div class="mb-2 font-bold">{menu.usefulLinks}</div>
         <ul class="ml-4 space-y-2">
           <li>
-            <a href={getLocalePath('/donate')} class="block text-dark hover:text-coral"
+            <a href={getLocalePath('/donate')} class="text-dark hover:text-coral block"
               >{menu.donate}</a
             >
           </li>
           <li>
-            <a href={getLocalePath('/about')} class="block text-dark hover:text-coral"
+            <a href={getLocalePath('/about')} class="text-dark hover:text-coral block"
               >{menu.aboutUs}</a
             >
           </li>
           <li>
-            <a href="https://docs.zen-browser.app" class="block text-dark hover:text-coral"
+            <a href="https://docs.zen-browser.app" class="text-dark hover:text-coral block"
               >{menu.documentation}</a
             >
           </li>
@@ -85,19 +85,19 @@ const {
             <a
               href="https://github.com/zen-browser"
               target="_blank"
-              class="block text-dark hover:text-coral">{menu.github}</a
+              class="text-dark hover:text-coral block">{menu.github}</a
             >
           </li>
         </ul>
       </li>
       <!-- Extra Links -->
       <li>
-        <a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral"
+        <a href={getLocalePath('/mods')} class="text-dark hover:text-coral block font-bold"
           >{menu.mods}</a
         >
       </li>
       <li>
-        <a href={getLocalePath('/download')} class="block font-bold text-dark hover:text-coral"
+        <a href={getLocalePath('/download')} class="text-dark hover:text-coral block font-bold"
           >{menu.download}</a
         >
       </li>

src/components/Title.astro

@@ -4,7 +4,7 @@ const { class: className } = Astro.props
 ---
 
 <h1
-  class={cn('mb-[0.4rem] font-junicode text-5xl font-semibold leading-[0.9] text-dark', className)}
+  class={cn('font-junicode text-dark mb-[0.4rem] text-5xl leading-[0.9] font-semibold', className)}
 >
   <slot />
 </h1>

src/components/download/PlatformDownload.astro

@@ -140,7 +140,7 @@ function isFlatReleaseInfo(obj: unknown): obj is ReleaseInfo {
       </div>
     </div>
     <div
-      class="download-browser-logo flex justify-center text-coral transition-colors data-[twilight='true']:text-zen-blue md:w-1/3"
+      class="download-browser-logo text-coral data-[twilight='true']:text-zen-blue flex justify-center transition-colors md:w-1/3"
     >
       <Image src={AppIconDark} alt="Zen Browser" class="w-32 translate-y-6 transform dark:hidden" />
       <Image

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

@@ -17,7 +17,7 @@ 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 xl:text-9xl"> 404 </Title>
+    <Title class="text-coral text-7xl font-bold 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}

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

@@ -17,14 +17,14 @@ const {
 <Layout title={layout.about.title} description={layout.about.description}>
   <main class="container flex min-h-screen w-full flex-col gap-24 py-24">
     <div class="flex w-full flex-col gap-6">
-      <Description class="text-6xl font-bold leading-none">{about.title}</Description>
+      <Description class="text-6xl leading-none font-bold">{about.title}</Description>
       <Description class="max-w-4xl">
         {about.description}
       </Description>
       <Button href="/donate" class="w-fit" isPrimary>{about.littleHelp}</Button>
     </div>
     <div class="flex w-full flex-col gap-4">
-      <div class="text-4xl font-bold leading-none lg:text-5xl">{about.mainTeam.title}</div>
+      <div class="text-4xl leading-none font-bold lg:text-5xl">{about.mainTeam.title}</div>
       <Description>
         {about.mainTeam.description}
       </Description>
@@ -55,7 +55,7 @@ const {
       </div>
     </div>
     <div class="flex w-full flex-col gap-4">
-      <div class="text-4xl font-bold leading-none lg:text-5xl">{about.contributors.title}</div>
+      <div class="text-4xl leading-none font-bold lg:text-5xl">{about.contributors.title}</div>
       <Description>
         {about.contributors.description}
       </Description>

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

@@ -14,7 +14,7 @@ const {
 ---
 
 <Layout title={layout.donate.title} description={layout.donate.description}>
-  <main class="container flex flex-col items-center gap-12 pb-52 pt-24">
+  <main class="container flex flex-col items-center gap-12 pt-24 pb-52">
     <div class="flex flex-col gap-4 lg:text-center">
       <Description class="text-6xl font-bold">{donate.title}</Description>
       <Description class="max-w-3xl">
@@ -32,7 +32,7 @@ const {
           <ArrowRightIcon class="size-4" />
         </Button>
       </div>
-      <hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
+      <hr class="bg-dark hidden h-72 w-[1px] opacity-15 lg:block" />
       <div class="flex flex-col items-center gap-4">
         <div class="text-6xl font-bold">{donate.koFi.title}</div>
         <Description>

src/pages/[...locale]/mods/index.astro

@@ -19,7 +19,7 @@ const allMods = (await getAllMods()) || []
 
 <Layout title={layout.mods.title}>
   <main class="container mt-32 flex flex-col gap-10 2xl:mt-32">
-    <header class="flex w-full flex-col gap-8 border-dark">
+    <header class="border-dark flex w-full flex-col gap-8">
       <Description class="text-6xl font-bold">{mods.title}</Description>
       <Description class="max-w-3xl">
         {mods.description}

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

@@ -13,7 +13,9 @@ const {
 ---
 
 <Layout title={layout.privacyPolicy.title} 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 [&_li]:ml-4 [&_li]:list-disc [&_p,li]:opacity-55 [&_ul]:mt-4"
+  >
     <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">
@@ -153,17 +155,3 @@ const {
     </ul>
   </main>
 </Layout>
-<style>
-  p,
-  li {
-    @apply opacity-55;
-  }
-
-  ul {
-    @apply mt-4;
-  }
-
-  li {
-    @apply ml-4 list-disc;
-  }
-</style>

src/pages/[...locale]/release-notes/[...slug].astro

@@ -30,7 +30,7 @@ const release = Astro.props
 ---
 
 <Layout title={slug.title} redirect={`/release-notes#${release.version}`}>
-  <main class="flex flex-col items-center pb-52 pt-36">
+  <main class="flex flex-col items-center pt-36 pb-52">
     {slug.redirect.replaceAll('{version}', release.version)}
   </main>
 </Layout>

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

@@ -28,7 +28,7 @@ if (latestVersion.version.split('.').length > 2 && whatsNewText[1] !== latestVer
 
 <Layout title={layout.whatsNew.title.replace('{latestVersion.version}', latestVersion.version)}>
   <main
-    class="xl:mt-22 container flex flex-col gap-12 py-12 xl:grid xl:min-h-[calc(100vh-12rem)] xl:grid-cols-[2fr_3fr]"
+    class="container flex flex-col gap-12 py-12 xl:mt-22 xl:grid xl:min-h-[calc(100vh-12rem)] xl:grid-cols-[2fr_3fr]"
   >
     <div class="flex flex-col gap-8">
       <div>