#55 ブログタブを変更

OUCC · Jan 3, 2024 · 79e6d95 · 79e6d95
1 parent 4b65487
commit 79e6d95
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 59 deletions.
diff --git a/src/components/blog/ListViewTab.astro b/src/components/blog/ListViewTab.astro
@@ -22,27 +22,32 @@ const items: Item[] = [
 const { current } = Astro.props
 ---
 
-<div class="bg-dot bg-dot-white flex justify-center">
-  <div class="w-full max-w-padded-container">
-    <ul class="flex gap-2 px-8 pt-3">
-      {
-        items.map((item) => (
-          <li class:list={[]}>
-            <a
-              class:list={[
-                'whitespace-nowrap rounded-t-xl border-x-2 border-t-2 border-secondary px-2 py-1',
-                {
-                  'bg-white': item.path !== current,
-                  'bg-secondary': item.path === current,
-                },
-              ]}
-              href={item.path}
-            >
-              {item.text}
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </div>
+<div class="flex justify-center bg-white">
+  <ul class="flex gap-4 px-8 pt-3">
+    {
+      items.map((item) => (
+        <li
+          class:list={[
+            {
+              'after:block after:h-1 after:rounded-t after:bg-primary':
+                item.path === current,
+            },
+          ]}
+        >
+          <a
+            class:list={[
+              'whitespace-nowrap px-2 text-2xl',
+              {
+                'text-black': item.path === current,
+                'pb-1 text-gray-600 hover:text-black': item.path !== current,
+              },
+            ]}
+            href={item.path}
+          >
+            <h1 class="inline-block">{item.text}</h1>
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </div>
diff --git a/src/components/layout/nav/BlogNav.astro b/src/components/layout/nav/BlogNav.astro
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -2,7 +2,6 @@
 import BaseLayout from './BaseLayout.astro'
 import Header from '@/components/layout/nav/Header.astro'
 import Footer from '@/components/layout/Footer.astro'
-import BlogNav from '@/components/layout/nav/BlogNav.astro'
 
 export interface Props {
   title: string
@@ -36,7 +35,6 @@ const ogImageUrl = new URL(image, Astro.site).toString()
     headerTitle="BLOG"
     rootPath="/blog"
   />
-  <BlogNav />
   <div class="bg-dot bg-dot-secondary flex-grow">
     <slot />
   </div>