Improved blog section display

Author: jeremyfa

content/blog.ejs

@@ -33,17 +33,26 @@ This section has articles that share development details and progress about Cera
 
 <% for (aMenu of articleMenus) { %>
 <h2><%= aMenu %></h2>
-<ul>
+<div class="blog-cards">
     <%
     for (item of allArticles) {
         if (item.data.category == 'blog' && item.url != '/blog/' && item.data.menu == aMenu) {
     %>
-        <li>
-            <span class="item-date"><%= item.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %></span> <a href="<%= item.url %>"><%= item.data.title %></a>
-        </li>
+    <a href="<%= item.url %>" class="blog-card">
+        <div class="blog-card-image">
+            <img src="<%= item.data.image %>" alt="<%= item.data.title %>" />
+        </div>
+        <div class="blog-card-content">
+            <div class="blog-card-date"><%= item.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %></div>
+            <div class="blog-card-title"><%= item.data.title %></div>
+            <% if (item.data.description) { %>
+            <div class="blog-card-description"><%= item.data.description %></div>
+            <% } %>
+        </div>
+    </a>
     <%
         }
     }
     %>
-</ul>
+</div>
 <% } %>

content/static/style.css

@@ -1042,6 +1042,97 @@ body#page-examples.page-examples-index {
     color: #7fc4ff !important;
 }
 
+/* Blog Cards */
+.blog-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 30px;
+}
+
+.blog-card {
+    display: flex;
+    flex-direction: row;
+    background-color: #252525;
+    border: 1px solid #404040;
+    text-decoration: none;
+    transition: background-color 0.15s, border-color 0.15s;
+    overflow: hidden;
+}
+
+.blog-card:hover {
+    background-color: #303030;
+    border-color: #505050;
+}
+
+.blog-card,
+.blog-card:hover,
+.blog-card *,
+.blog-card:hover * {
+    text-decoration: none !important;
+}
+
+.blog-card-image {
+    flex-shrink: 0;
+    width: 200px;
+    min-height: 150px;
+    overflow: hidden;
+    background-color: #111;
+    position: relative;
+}
+
+.blog-card-image img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.blog-card-content {
+    flex: 1;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.blog-card-date {
+    font-size: 13px;
+    color: #888;
+    margin-bottom: 6px;
+}
+
+.blog-card-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #60AFEF;
+    margin-bottom: 8px;
+}
+
+.blog-card:hover .blog-card-title {
+    color: #7fc4ff;
+}
+
+.blog-card-description {
+    font-size: 14px;
+    color: #999;
+    line-height: 1.4;
+}
+
+@media (max-width: 500px) {
+    .blog-card {
+        flex-direction: column;
+    }
+
+    .blog-card-image {
+        width: 100%;
+        height: 180px;
+    }
+}
+
 @media (max-width: 600px) {
     #page-guides.page-guides-index .content-right {
         width: 100%;