Issue expressjs#1483

- add single template style to posts page; will handle all post displays - build posts template styles
chrisdel101 · Apr 29, 2024 · d343054 · d343054
1 parent 3b316c2
commit d343054
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 9 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1205,4 +1205,55 @@ h2 a {
 }
 #page-doc:has(> h1#express-blog) {
   min-height: 300px;
+}
+.blog-posts {
+  display: flex;
+  flex-direction: column;
+}
+.blog-post {
+  width: 95%;
+  background-color: #eee;
+  display: flex;
+  padding: 10px
+}
+.blog-post img {
+  max-width: 100%;
+  object-fit: cover;
+}
+.blog-post .left-col {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.blog-post .right-col {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.blog-tag {
+  font-size: 12px;
+}
+.blog-title {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+}
+.blog-title a {
+  color: #000;
+}
+@media (min-width:768px) {
+  .blog-post .left-col {
+    justify-content: flex-start;
+  }
+  .blog-tags {
+    margin-bottom: 20px;
+  } 
+  .blog-title {
+    font-weight: 600;
+    font-size: 1.75rem;
+    margin-bottom: 20px;
+    line-height: 1.5;
+  }
+
 }
diff --git a/en/blog/posts.md b/en/blog/posts.md
@@ -3,22 +3,39 @@ layout: page
 title: Express Blog Posts
 menu: blog
 lang: en
+tags: security, optimization, AI, LLMS
 redirect_from: "/blog/posts.html"
 ---
-
-
-# Express Blog  
-
-## All Posts
-
+
+# Express Blog 
 
 {% if (site.posts.size != 0) %}
-Select a blog post to view
-
+<div class="blog-posts">
 {% for post in site.posts %}
-  - [{{ post.title }}]({{ post.url }})
+  <div class="blog-post">
+    <div class="left-col">
+      <div class="blog-tags">
+        {% for tag in post.tags %}
+          <span class="blog-tag">{{ tag|upcase }}</span>
+        {% endfor %}
+      </div>
+      <div class="blog-title">
+        <a href="{{ post.url }}"> {{ post.title }}</a>
+      </div>
+      <div class="blog-details">
+        <span>By {{ post.author }}</span>
+        <span>{{ post.date | date:"%b %d, %Y" }}</span>
+      </div>
+    </div>
+     <div class="right-col">
+      <div class="blog-img">
+          <img src="https://loremflickr.com/300/300"/>
+        </div>
+     </div>
+  </div>
 
 {% endfor %}
 {% else %}
   There are currently no blog posts.
 {% endif %}
+</div>