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

@@ -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}`}>
+  <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>
   ))}
-  </div>
 </BaseLayout>

src/pages/index.astro

@@ -15,9 +15,9 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
 
   <FeaturedBox />
 
-  <div id="content">
   {posts.map((post) => (
-      <div id={`post-${post.id}`}>
+  <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().
@@ -27,8 +27,10 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       </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>
 
   <div class="content-ver-sep"> </div>
   <div id="customers-comment">