From 597283800bae30d2efc0850383600d4dbe873860 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 15 Jul 2025 12:45:45 +0800
Subject: [PATCH] style(docs): size & align & responsive

---
 docs/.vitepress/components/Home.vue | 39 ++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/docs/.vitepress/components/Home.vue b/docs/.vitepress/components/Home.vue
index c5475ab51..8396eaf90 100644
--- a/docs/.vitepress/components/Home.vue
+++ b/docs/.vitepress/components/Home.vue
@@ -3,42 +3,51 @@ import homeCover from '../assets/home-cover-2025-07-15.png'
 </script>
 
 <template>
+  <!-- eslint-disable vue/prefer-separate-static-class -->
   <div relative h-full w-full flex flex-1 flex-col>
-    <section h-full w-full flex flex-1 flex-col class="mx-auto max-w-[1440px]">
-      <div class="items-center justify-start pt-20 md:pt-36" h-full w-full flex flex-1 flex-col gap-4 overflow-hidden px-16 pb-16>
-        <div bg="transparent" font-extrabold font-sans-rounded class="relative z-3 w-full flex justify-center" text="4xl md:5xl">
+    <section class="mx-auto h-full max-w-[1440px] w-full flex flex-1 flex-col">
+      <div class="z-10 h-full w-full flex flex-1 flex-col items-center justify-start gap-4 overflow-hidden px-16 pb-16 pt-20 md:pt-36">
+        <div class="relative w-full justify-center text-center font-extrabold font-sans-rounded" text="4xl md:5xl">
           <div>
             Project AIRI
           </div>
         </div>
-        <div max-w="120 md:150 lg:200" text-wrap class="relative z-3 text-center text-slate-900 dark:text-white">
+        <div class="relative max-w-prose text-center text-slate-900 dark:text-white">
           A container of souls of AI waifu / virtual characters to bring them into our worlds.
         </div>
-        <div class="relative z-3 justify-center" w-full flex gap-2>
+        <div class="relative z-10 w-full flex justify-center gap-4">
           <a
             href="https://github.com/moeru-ai/airi/releases/latest"
-            bg="primary/60 dark:primary/30" class="text-slate-100 dark:text-cyan-200"
-            rounded-lg px-4 py-2 font-extrabold outline-none backdrop-blur-md focus:outline-none
+            class="rounded-lg bg-primary/60 px-4 py-2 text-slate-100 font-extrabold outline-none backdrop-blur-md dark:bg-primary/30 dark:text-cyan-200 focus:outline-none"
           >
             Download
           </a>
           <a
             href="./docs/overview/"
-            class="bg-white/60 text-slate-900 dark:bg-white/20 dark:text-slate-100"
-            rounded-lg px-4 py-2 font-extrabold outline-none backdrop-blur-md focus:outline-none
+            class="rounded-lg bg-white/60 px-4 py-2 text-slate-900 font-extrabold outline-none backdrop-blur-md dark:bg-white/20 dark:text-slate-100 focus:outline-none"
           >
             Get Started
           </a>
         </div>
-        <div class="z-1 max-h-[calc(100dvh-9.3rem)] max-w-100dvw min-h-[calc(100dvh-9.3rem)] min-w-100dvw lg:max-h-[calc(100dvh-13.25rem)] lg:min-h-[calc(100dvh-13.25rem)]" absolute overflow-hidden>
-          <div class="absolute left-0 top-16 z-2 block h-1/2 w-full scale-120 from-transparent to-white bg-gradient-to-t md:top-0 dark:to-[hsl(207_15%_5%)]" />
-          <img :src="homeCover" alt="Project AIRI Cover Image" class="absolute translate-y-90 rotate--20 scale-160 object-cover object-cover lg:translate-y--10 md:translate-y-60 lg:scale-90 md:scale-120">
-        </div>
       </div>
     </section>
 
-    <footer class="fixed bottom-3 left-50% z-4 flex translate-x--1/2 justify-end">
-      <div class="text-muted-foreground rounded-full px-3 py-2 text-sm backdrop-blur-md" bg="white/80 dark:white/20" text="slate-400 dark:slate-900 nowrap">
+    <div class="absolute inset-0 overflow-hidden -z-10">
+      <div class="absolute bottom-0 left-0 right-0 z-2 h-full from-transparent to-white bg-gradient-to-t dark:to-[hsl(207_15%_5%)]" />
+      <img
+        :src="homeCover"
+        alt="Project AIRI Cover Image"
+        :class="[
+          'absolute top-2rem md:top-8dvh lg:top-32dvh xl:top-20dvh left-1/2 -translate-x-1/2 max-w-none object-cover z-1',
+          'w-[160%] translate-y-[25%] -rotate-20',
+          'md:w-[120%] md:translate-y-[20%] md:rotate-[-15deg]',
+          'lg:w-[95%] lg:translate-y-[5%] lg:rotate-[-10deg]',
+        ]"
+      >
+    </div>
+
+    <footer class="fixed bottom-3 left-1/2 z-40 flex justify-end -translate-x-1/2">
+      <div class="rounded-full bg-white/80 px-3 py-2 text-sm text-slate-400 backdrop-blur-md dark:bg-white/20 dark:text-slate-900" text="nowrap">
         Since 2024 @ <a href="https://github.com/proj-airi">Project AIRI</a> × <a href="https://github.com/moeru-ai">萌える AI 研究会</a>
       </div>
     </footer>