Merge pull request #39 from INxST/feature/#15/top

[Update] title調整
INxST · Jul 21, 2024 · 288417e · 288417e
2 parents 747c4be + 7135ff7
commit 288417e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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">