Redesign homepage hero

docs/astro.config.mjs

@@ -11,6 +11,10 @@ export default defineConfig({
 	integrations: [
 		starlight({
 			title: 'Make It MMD',
+            customCss: [
+                './src/styles/custom.css',
+                '@fontsource-variable/public-sans/wght.css',
+            ],
             defaultLocale: 'en',
             locales: {
                 en: {

docs/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.3",
     "@astrojs/starlight": "^0.26.1",
+    "@fontsource-variable/public-sans": "^5.0.19",
     "astro": "^4.15.2",
     "sharp": "^0.32.5",
     "typescript": "^5.5.4"

docs/src/content/docs/en/index.mdx

@@ -1,22 +1,26 @@
 ---
-title: Non-destructive MMD tool for VRChat
+title: Non-destructive MMD tooling
 description: Make your avatars compatible with VRChat MMD worlds!
 template: splash
 hero:
-  tagline: Make your avatars compatible with VRChat MMD worlds!
-  image:
-    file: ../../../assets/screenshot.png
+  tagline: For VRChat avatars. Free. Open Source. Powered by NDMF.
   actions:
-    - text: Download via VCC
+    - text: Add to VCC
       link: https://enitimeago.github.io/vpm-repos/
       icon: external
+      attrs:
+        target: _blank
     - text: Documentation
       link: /make-it-mmd/en/guides/getting-started/
       icon: right-arrow
       variant: minimal
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
+import { Image } from 'astro:assets';
+import screenshot from '../../../assets/screenshot.png';
+
+<Image src={screenshot} alt="" />
 
 ## Next steps
 

docs/src/content/docs/ja/index.mdx

@@ -1,26 +1,33 @@
 ---
-title: 変更可能のMMD表情設定
+title: 変更可能なMMD表情設定
 description: VRChatのアバターをMMDワールドに対応させるツール
 template: splash
 hero:
-  tagline: VRChatのアバターをMMDワールドに対応させるツール
-  image:
-    file: ../../../assets/screenshot.png
+  tagline: VRChat Avatars向けの非破壊的MMDシェイプキー生成とワールド対応調整。新しいメッシュを生成せず、元のアバターをそのまま。
   actions:
     - text: BOOTHで無料ダウンロード
       link: https://eni.booth.pm/items/5530958
       icon: external
+      attrs:
+        target: _blank
+        data-booth-link: true
     - text: VCC
       link: https://enitimeago.github.io/vpm-repos/
       icon: external
       variant: minimal
+      attrs:
+        target: _blank
     - text: 説明書
       link: /make-it-mmd/ja/guides/getting-started/
       icon: right-arrow
       variant: minimal
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
+import { Image } from 'astro:assets';
+import screenshot from '../../../assets/screenshot.png';
+
+<Image src={screenshot} alt="" />
 
 ## Next steps
 

docs/src/styles/custom.css

@@ -0,0 +1,57 @@
+/* Dark mode colors. */
+:root {
+	--sl-color-accent-low: #28154d;
+	--sl-color-accent: #7d00fb;
+	--sl-color-accent-high: #cbbeff;
+	--sl-color-white: #ffffff;
+	--sl-color-gray-1: #ecedf1;
+	--sl-color-gray-2: #c1c2c6;
+	--sl-color-gray-3: #898b93;
+	--sl-color-gray-4: #56585f;
+	--sl-color-gray-5: #36383f;
+	--sl-color-gray-6: #25262d;
+	--sl-color-black: #17181b;
+}
+/* Light mode colors. */
+:root[data-theme='light'] {
+	--sl-color-accent-low: #d8cfff;
+	--sl-color-accent: #7f00ff;
+	--sl-color-accent-high: #3a1673;
+	--sl-color-white: #17181b;
+	--sl-color-gray-1: #25262d;
+	--sl-color-gray-2: #36383f;
+	--sl-color-gray-3: #56585f;
+	--sl-color-gray-4: #898b93;
+	--sl-color-gray-5: #c1c2c6;
+	--sl-color-gray-6: #ecedf1;
+	--sl-color-gray-7: #f6f6f8;
+	--sl-color-black: #ffffff;
+}
+
+/* Fonts. */
+:root {
+    --sl-font: "Public Sans";
+}
+
+/* Customizations. */
+.hero h1 {
+    background: linear-gradient(transparent 70%, var(--sl-color-accent-low) 70%, var(--sl-color-accent-low) 90%, transparent 90%);
+}
+.hero h1::after {
+    content: ".";
+}
+html[lang=ja] .hero h1::after {
+    content: "。";
+}
+.hero .sl-link-button.primary {
+    font-weight: bold;
+}
+.hero .sl-link-button.primary[data-booth-link] {
+    --sl-color-text-accent: #fc4d50;
+    --sl-color-black: #ffffff;
+}
+@media (min-width: 50rem) {
+    .hero {
+        grid-template-columns: 1fr;
+    }
+}