feat: Finished all blog posts layout page

public/css/posts.css

@@ -9,13 +9,32 @@
   grid-column-gap: 2rem;
   grid-row-gap: 2rem;
 }
+.posts > a {
+  text-decoration: none;
+  color: rgba(var(--black), .76);
+}
 .posts > div {
   width: 100%;
 }
+.post-card {
+  background-color: white;
+  border-radius: 1rem;
+  box-shadow: 0 2px 4px rgba(var(--black), .21);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.post-card:hover {
+  transform: translate(-4px, -4px); /* Up and left by 4px */
+  box-shadow: 0 8px 16px rgba(var(--black), 0.3); /* deeper shadow for “lifted” look */
+}
 .post-card > img {
   width: 100%;
   object-fit: cover;
   object-position: center;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+.post-card .post-body {
+  padding: 2rem;
 }
 
 @media (min-width: 992px) {

src/post/post-1.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 1
 date: 2025-08-01
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 First post! Content change

src/post/post-10.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 10
 date: 2025-08-10
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-11.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 3
 date: 2025-08-11
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-12.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 12
 date: 2025-08-12
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-2.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 2 - for Paz
 date: 2025-08-02
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-3.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 3
 date: 2025-08-03
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-4.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 4
 date: 2025-08-04
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-5.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 5
 date: 2025-08-05
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-6.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 6
 date: 2025-08-06
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-7.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 7
 date: 2025-08-07
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-8.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 8
 date: 2025-08-08
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/post/post-9.md

@@ -1,7 +1,7 @@
 ---
 title: Example post 9
 date: 2025-08-09
-thumbnail: https://dummyimage.com/1280x720/fff/aaa
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
 ---
 
 Second post!

src/posts.liquid

@@ -18,17 +18,19 @@ css: posts.css
   </div>
   <div class="container posts">
     {% for post in pagination.items %}
-      <div class="post-card">
+      <a href="{{ post.url }}">
-        {% if post.data.thumbnail %}
+        <div class="post-card">
-          <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
+          {% if post.data.thumbnail %}
-        {% endif %}
+            <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
-        <div class="post-body">
+          {% endif %}
-          <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
+          <div class="post-body">
-          <h1>{{ post.data.title }}</h1>
+            <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
-          <p>{{ post.data.context }}</p>
+            <h1>{{ post.data.title }}</h1>
-          <!-- <p>Views {} | Likes {}</p> -->
+            <p>{{ post.data.context }}</p>
+            <!-- <p>Views {} | Likes {}</p> -->
+          </div>
         </div>
-      </div>
+      </a>
     {% endfor %}
   </div>
 </div>