From 67ddd30430349df3e0db1aa89f212745facec24c Mon Sep 17 00:00:00 2001
From: jamesvici <jamesp@vicidial.com>
Date: Tue, 15 Sep 2026 19:57:51 -0400
Subject: [PATCH] Space out and full-width the post listings

Three things were off in the front-page and blog listings.

The floated thumbnail was never cleared, so the next item's heading
wrapped around it instead of starting below -- front-page.php emits
<br /><div class="clear"> </div> after each post, which is now
reproduced.

The post wrapper was missing the classes WordPress adds via
post_class(); .post/.hentry carry the margin-bottom: 20px that separates
items.

And the listings sat in the theme's #content, which is float: left and
650px because it expects a 230px sidebar alongside. There is no sidebar
here -- the search and widget boxes were WordPress-specific chrome and
were dropped -- so that just left dead space to the right. BaseLayout
already wraps the slot in the full-width #content-full, so the inner
wrapper is removed and the sections span the full 930px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/pages/blog/index.astro | 24 +++++++++++++-----------
 src/pages/index.astro      | 30 ++++++++++++++++--------------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 1441a26..fc3d0a7 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -7,15 +7,17 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
 ---
 
 <BaseLayout title="Blog | VICIdial.com">
-  <div id="content">
-    {posts.map((post) => (
-      <div id={`post-${post.id}`}>
-        <a href={`/blog/${post.data.slug}`}>
-          <h2 class="post-title">{post.data.title}</h2>
-          {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
-        </a>
-        <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
-      </div>
-    ))}
-  </div>
+  {posts.map((post) => (
+  <Fragment key={post.id}>
+    <div class="post hentry" id={`post-${post.id}`}>
+      <a href={`/blog/${post.data.slug}`}>
+        <h2 class="post-title">{post.data.title}</h2>
+        {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
+      </a>
+      <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
+    </div>
+    <br />
+    <div class="clear"> </div>
+  </Fragment>
+  ))}
 </BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ed6e3bb..6cfc910 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,20 +15,22 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
 
   <FeaturedBox />
 
-  <div id="content">
-    {posts.map((post) => (
-      <div id={`post-${post.id}`}>
-        <a href={`/blog/${post.data.slug}`}>
-          <h2 class="post-title">{post.data.title}</h2>
-          {/* 210x150 cropped from left-top, matching the theme's set_post_thumbnail_size().
-              The featured images are 930x354 slide banners, so a centre crop would cut off
-              the subject, which sits in the left portion. */}
-          {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
-        </a>
-        <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
-      </div>
-    ))}
-  </div>
+  {posts.map((post) => (
+  <Fragment key={post.id}>
+    <div class="post hentry" id={`post-${post.id}`}>
+      <a href={`/blog/${post.data.slug}`}>
+        <h2 class="post-title">{post.data.title}</h2>
+        {/* 210x150 cropped from left-top, matching the theme's set_post_thumbnail_size().
+            The featured images are 930x354 slide banners, so a centre crop would cut off
+            the subject, which sits in the left portion. */}
+        {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
+      </a>
+      <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
+    </div>
+    <br />
+    <div class="clear"> </div>
+  </Fragment>
+  ))}
 
   <div class="content-ver-sep"> </div>
   <div id="customers-comment">