Merge pull request #11 from dorimiamn/fix-issue-10

記事の読みづらさを軽減するための CSS の修正
dorimiamn · Jan 13, 2025 · f203d94 · f203d94
2 parents 7734abb + c745ed0
commit f203d94
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -23,17 +23,19 @@ export default async function BlogList() {
 
   return (
     <div className='container w-4/6 mx-auto my-10'>
-      <h1>記事一覧</h1>
+      <h1 className='mb-16'>記事一覧</h1>
       {
         posts.length === 0 ?
           <p>ごめんなさい！記事が見つかりませんでした。</p>
           :
-          <ul>
+          <ul className='list-none'>
             {
               posts.map((post: Props) => (
                 <li key={post.id}>
                   <Link href={`/blog/${post.id}`}>
-                    {post.title}
+                    <div className='border-y-2 border-zinc-500 p-4'>
+                      {post.title}
+                    </div>
                   </Link>
                 </li>
               ))

diff --git a/app/global.css b/app/global.css
@@ -7,22 +7,25 @@
         font-family: "Kiwi Maru", system-ui, sans-serif;
     }
     h1 {
-        @apply text-2xl font-bold my-1;
+        @apply text-2xl font-bold my-4;
     }
     h2 {
-        @apply text-xl font-bold my-1;
+        @apply text-xl font-bold my-4;
     }
     h3 {
-        @apply text-lg font-bold my-1;
+        @apply text-lg font-bold my-4;
     }
     h4 {
-        @apply text-base font-bold my-1;
+        @apply text-base font-bold my-4;
     }
     div[data-filename] {
-        @apply bg-slate-900 text-sm text-slate-300 p-2 rounded my-1;
+        @apply bg-slate-900 text-sm text-slate-300 p-2 rounded my-4;
     }
     p > code {
         @apply bg-slate-900 text-sm text-slate-300 p-1 rounded;
     }
+    ul {
+        @apply list-disc list-inside my-4;
+    }
 }