Blog Site: All Blog Posts Page

Published: October 3, 2025

I wanted a dedicated page to list all my posts. There is a short intro at the top, followed by a vertical list of posts. I kept the structure consistent with the homepage cards, but dropped the grid and used a single-column layout. Each .post-item has a dark background, padding, and hover effect.

.post-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.post-item {
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
            

Posts use an <article> element with a link wrapping the title, date, and description. This ensures the entire block is clickable:

<article class="post-item">
  <a href="posts/latest-posts.html">
    <h2>Blog Site: Latest Blog Posts Section</h2>
    <p class="post-meta">Published: October 3, 2025</p>
    <p>
      Showing recent posts on the homepage with cards that adapt
      across screen sizes.
    </p>
  </a>
</article>
            

This page complements the homepage by providing a complete overview of my posts.