Blog Site: About and Individual Blog Post Pages

Published: October 5, 2025

I started by creating a base layout that could adapt to both blog posts and static pages.

<main class="content-page">
  <section>
    <div class="content-box">
      <!-- Page or post content -->
    </div>
  </section>
</main>
            

The .content-page class defines consistent padding around the main content area, while .content-box adds a dark background, rounded corners, and a soft shadow.

Every blog post is wrapped inside an <article> element with the class .blog-post. Inside it, I use:

<h1 class="post-title">...</h1>
<p class="post-intro">Published: ...</p>
<p class="post-paragraph">...</p>
            

These classes handle typography and spacing, and keep posts uniform.

The About page follows the same .content-page and .content-box structure, even though it doesn’t use the .blog-post class. It uses plain <h1> and <p> tags.

Paragraphs rely on default styles defined under .content-page p in style.css.

This setup keeps the code clean, modular, and easy to maintain. It also sets the foundation for future templating or automation.