feat: 调整样式

src/pages/index.astro

@@ -11,10 +11,13 @@ const posts = [
 ---
 
 <Layout>
-  <div>
+  <div class="posts">
     {
       posts.map((post) => (
-        <a href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}>
+        <a
+          class="post"
+          href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}
+        >
           <h2>{post.title}</h2>
           <p>{post.date}</p>
           <p class="summary">{post.summary}</p>
@@ -25,8 +28,20 @@ const posts = [
 </Layout>
 
 <style>
+  .posts {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .post {
+    background: #fff;
+    padding: 16px;
+    border-radius: 12px;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
+  }
+
   .summary {
-    line-height: 2;
     font-size: 16px;
     color: rgb(66, 63, 63);
   }