chore: Progress sync for the night

public/css/posts.css

@@ -0,0 +1,25 @@
+.mb-2 {
+  margin-bottom: 2rem;
+}
+
+.posts {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+}
+.posts > div {
+  width: 100%;
+}
+.post-card > img {
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+@media (min-width: 992px) {
+  .posts {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

src/post/post-1.md

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

src/post/post-10.md

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

src/post/post-11.md

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

src/post/post-12.md

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

src/post/post-2.md

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

src/post/post-3.md

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

src/post/post-4.md

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

src/post/post-5.md

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

src/post/post-6.md

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

src/post/post-7.md

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

src/post/post-8.md

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

src/post/post-9.md

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

src/posts.liquid

@@ -7,24 +7,33 @@ pagination:
 permalink: "/posts{% if pagination.pageNumber != 0 %}/{{ pagination.pageNumber }}{% endif %}/"
 layout: layout.liquid
 title: Posts
+css: posts.css
 ---
 
-<div class="container">
-  <h1>All Posts</h1>
-</div>
-<div class="container">
-  <ul>
+<div class="alternating-background-container alternating-primary-brown">
+  <div>
+    <div class="contaier">
+      <h1 class="title text-center">All Posts</h1>
+    </div>
+  </div>
+  <div class="container posts">
     {% for post in pagination.items %}
-      <li>
-        <a href="{{ post.url }}">{{ post.data.title }}</a> – {{ post.date | date: "%B %-d, %Y" }}
-      </li>
+      <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>
     {% endfor %}
-  </ul>
+  </div>
 </div>
-
-
-
-<div class="pagination">
+<div class="container">
+  <div class="pagination mb-2">
     {% if pagination.href.previous %}
       <a href="{{ pagination.href.previous }}">← Previous</a>
     {% endif %}
@@ -34,4 +43,5 @@ title: Posts
     {% if pagination.href.next %}
       <a href="{{ pagination.href.next }}">Next →</a>
     {% endif %}
+  </div>
 </div>