Add blog using correct Eleventy structure

.eleventy.js

@@ -5,6 +5,14 @@ const yaml = require("js-yaml");
 module.exports = (eleventyConfig) => {
   eleventyConfig.addWatchTarget("./src/assets");
 
+  // 	--------------------- Blog Collection ---------------------
+  eleventyConfig.addCollection("posts", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("src/blog/*.html")
+      .filter((item) => !item.inputPath.includes("index.html"))
+      .sort((a, b) => b.date - a.date);
+  });
+
   // 	--------------------- Custom Template Languages ---------------------
   eleventyConfig.addPlugin(require("./config/css-config.js"));
   eleventyConfig.addPlugin(require("./config/js-config.js"));

src/_includes/post.liquid

@@ -0,0 +1,54 @@
+---
+layout: base
+---
+<div class="bg-gradient-blog">
+  <section id="news-header">
+    <div class="container">
+      <div class="grid">
+        <div class="column col-s-12 col-m-10 col-m-offset-2">
+          <h1 class="text-center mb-48">
+            {{ title }}
+          </h1>
+          {% if subtitle %}
+          <p class="text-center">
+            {{ subtitle }}
+          </p>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+<div class="bg-primary">
+  <section id="post">
+    <div class="container">
+      {% if header_image %}
+      <div class="header">
+        <img
+          class="header-image"
+          src="{{ header_image }}"
+          alt="{{ title }}"
+        />
+      </div>
+      {% endif %}
+      <div class="date">
+        <p>{{ date | date: "%A, %B %d, %Y" }}</p>
+      </div>
+      <div class="grid">
+        <div class="col-s-12 col-m-8 col-m-offset-3">
+          <div class="content mb-128">
+            {{ content }}
+          </div>
+          {% if author %}
+          <div class="author">
+            <p class="name">{{ author }}</p>
+            {% if author_role %}
+            <p class="role">{{ author_role }}</p>
+            {% endif %}
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </section>
+</div>

src/assets/css/pages/blog.css

@@ -94,3 +94,66 @@
   font-size: 12px;
   font-weight: 300;
 }
+
+/* Blog listing styles */
+#blog-list {
+  padding-top: 80px;
+  padding-bottom: 120px;
+}
+
+.blog-card {
+  display: block;
+  border-radius: 16px;
+  background: var(--light-grey-color);
+  overflow: hidden;
+  text-decoration: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  height: 100%;
+}
+
+.blog-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(9, 41, 59, 0.12);
+}
+
+.blog-card-image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+
+.blog-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.blog-card-content {
+  padding: 24px;
+}
+
+.blog-card-date {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--grey-color);
+  margin-bottom: 12px;
+}
+
+.blog-card-title {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--primary-text-color);
+  margin-bottom: 12px;
+  line-height: 1.3;
+}
+
+.blog-card-description {
+  font-size: 14px;
+  font-weight: 300;
+  color: var(--secondary-text-color);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}