From abb4861389eab156ee17ebf3b3dd32560a3ef72c Mon Sep 17 00:00:00 2001
From: Cyper <cyperita@gmail.com>
Date: Fri, 22 Aug 2025 22:47:43 -0400
Subject: [PATCH] feat: Finished all blog posts layout page

---
 public/css/posts.css | 19 +++++++++++++++++++
 src/post/post-1.md   |  2 +-
 src/post/post-10.md  |  2 +-
 src/post/post-11.md  |  2 +-
 src/post/post-12.md  |  2 +-
 src/post/post-2.md   |  2 +-
 src/post/post-3.md   |  2 +-
 src/post/post-4.md   |  2 +-
 src/post/post-5.md   |  2 +-
 src/post/post-6.md   |  2 +-
 src/post/post-7.md   |  2 +-
 src/post/post-8.md   |  2 +-
 src/post/post-9.md   |  2 +-
 src/posts.liquid     | 22 ++++++++++++----------
 14 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/public/css/posts.css b/public/css/posts.css
index 8af0758..9764e42 100644
--- a/public/css/posts.css
+++ b/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) {
diff --git a/src/post/post-1.md b/src/post/post-1.md
index 2fb82e6..33950a8 100644
--- a/src/post/post-1.md
+++ b/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
\ No newline at end of file
diff --git a/src/post/post-10.md b/src/post/post-10.md
index 610cd43..0a1eea8 100644
--- a/src/post/post-10.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-11.md b/src/post/post-11.md
index 5b98856..560a92c 100644
--- a/src/post/post-11.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-12.md b/src/post/post-12.md
index 4719b33..3dd9b85 100644
--- a/src/post/post-12.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-2.md b/src/post/post-2.md
index 5646c34..8a02a28 100644
--- a/src/post/post-2.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-3.md b/src/post/post-3.md
index 6daa3ad..15abad9 100644
--- a/src/post/post-3.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-4.md b/src/post/post-4.md
index f5753ac..974b8dd 100644
--- a/src/post/post-4.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-5.md b/src/post/post-5.md
index 87fb8f8..0ced2e8 100644
--- a/src/post/post-5.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-6.md b/src/post/post-6.md
index 90b1772..5088b0f 100644
--- a/src/post/post-6.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-7.md b/src/post/post-7.md
index 20214c5..13a1b9a 100644
--- a/src/post/post-7.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-8.md b/src/post/post-8.md
index d2b1242..52c5e8b 100644
--- a/src/post/post-8.md
+++ b/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!
\ No newline at end of file
diff --git a/src/post/post-9.md b/src/post/post-9.md
index ca5a124..4e85e97 100644
--- a/src/post/post-9.md
+++ b/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!
\ No newline at end of file
diff --git a/src/posts.liquid b/src/posts.liquid
index 34a7df8..911ebc3 100644
--- a/src/posts.liquid
+++ b/src/posts.liquid
@@ -18,17 +18,19 @@ css: posts.css
   </div>
   <div class="container posts">
     {% for post in pagination.items %}
-      <div class="post-card">
-        {% if post.data.thumbnail %}
-          <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
-        {% endif %}
-        <div class="post-body">
-          <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
-          <h1>{{ post.data.title }}</h1>
-          <p>{{ post.data.context }}</p>
-          <!-- <p>Views {} | Likes {}</p> -->
+      <a href="{{ post.url }}">
+        <div class="post-card">
+          {% if post.data.thumbnail %}
+            <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
+          {% endif %}
+          <div class="post-body">
+            <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
+            <h1>{{ post.data.title }}</h1>
+            <p>{{ post.data.context }}</p>
+            <!-- <p>Views {} | Likes {}</p> -->
+          </div>
         </div>
-      </div>
+      </a>
     {% endfor %}
   </div>
 </div>