From 7135ff76429969ab19fda6be8d47c579781e1f95 Mon Sep 17 00:00:00 2001
From: Naoki_Ito <117070296+naoki-00-ito@users.noreply.github.com>
Date: Mon, 22 Jul 2024 02:02:41 +0900
Subject: [PATCH] =?UTF-8?q?[Update]=20title=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ParallaxGallery/index.astro |  1 +
 src/components/TopTitle.astro              | 31 ++++++++++++++++++----
 src/components/WorksGallery/index.astro    |  7 ++++-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/ParallaxGallery/index.astro b/src/components/ParallaxGallery/index.astro
index a2af243..ea59c0c 100644
--- a/src/components/ParallaxGallery/index.astro
+++ b/src/components/ParallaxGallery/index.astro
@@ -79,6 +79,7 @@ import More from '../More.astro';
         <TopTitle
           sub="（私について）"
           title={['これまでのこと', '嗜好と思考の話']}
+          href="/about"
         />
       </div>
 
diff --git a/src/components/TopTitle.astro b/src/components/TopTitle.astro
index 468f11e..90dc64d 100644
--- a/src/components/TopTitle.astro
+++ b/src/components/TopTitle.astro
@@ -1,21 +1,42 @@
 ---
+import cn from '@/libs/cn';
 interface Props {
   sub: string;
   title: string[];
+  href: string;
+  isSpHorizontal?: boolean;
 }
 
-const { sub, title } = Astro.props;
+const { sub, title, href, isSpHorizontal } = Astro.props;
+const classNameWrapper = cn('flex md:flex-row-reverse gap-2 md:gap-4', {
+  'flex-row-reverse': !isSpHorizontal,
+  'flex-col': isSpHorizontal,
+});
+const classNameSub = cn(
+  'md:text-lg leading-none font-medium md:vertical-rl md:-mt-6',
+  {
+    'vertical-rl': !isSpHorizontal,
+    '-mt-6': !isSpHorizontal,
+  }
+);
+const classNameMain = cn(
+  'md:vertical-rl flex flex-col gap-2 md:gap-4 md:[&>span:nth-child(n+2)]:mt-[2.625rem]',
+  {
+    'vertical-rl': !isSpHorizontal,
+    '[&>span:nth-child(n+2)]:mt-[2.625rem]': !isSpHorizontal,
+  }
+);
 ---
 
 <h2 class="text-current">
-  <a href="/about" class="flex flex-row-reverse gap-2 md:gap-4">
-    <span class="md:text-lg leading-none font-medium vertical-rl -mt-6">
+  <a href={href} class={classNameWrapper}>
+    <span class={classNameSub}>
       <span>{sub}</span>
     </span>
     <span class="text-[2rem] md:text-[2.625rem] leading-none font-semibold">
-      <span class="vertical-rl flex flex-col gap-2 md:gap-4">
+      <span class={classNameMain}>
         <span>{title[0]}</span>
-        <span class="mt-[2.625rem]">{title[1]}</span>
+        <span>{title[1]}</span>
       </span>
     </span>
   </a>
diff --git a/src/components/WorksGallery/index.astro b/src/components/WorksGallery/index.astro
index 9e96f35..1cbf91a 100644
--- a/src/components/WorksGallery/index.astro
+++ b/src/components/WorksGallery/index.astro
@@ -13,7 +13,12 @@ const newWorks = works.filter(work => work.isTop);
   class="relative py-24 md:py-[17.5rem] contents-full text-current"
 >
   <div class="flex md:justify-end ml:pr-[20%]">
-    <TopTitle sub="（制作実績）" title={['機能と情緒', '作品への想い']} />
+    <TopTitle
+      sub="（制作実績）"
+      title={['機能と情緒', '作品への想い']}
+      href="/works"
+      isSpHorizontal={true}
+    />
   </div>
 
   <ul id="works-gallery-link" class="mt-9 md:mt-24">