chore: Progress sync for the night

src/posts.liquid

@@ -7,31 +7,41 @@ 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="container">
+  <div class="pagination mb-2">
+    {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}">← Previous</a>
+    {% endif %}
 
+    Page {{ pagination.pageNumber | plus: 1 }} of {{ pagination.pages | size }}
 
-
-<div class="pagination">
-  {% if pagination.href.previous %}
-    <a href="{{ pagination.href.previous }}">← Previous</a>
-  {% endif %}
-
-  Page {{ pagination.pageNumber | plus: 1 }} of {{ pagination.pages | size }}
-
-  {% if pagination.href.next %}
-    <a href="{{ pagination.href.next }}">Next →</a>
-  {% endif %}
+    {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}">Next →</a>
+    {% endif %}
+  </div>
 </div>