Fix nav overflow and slideshow caption rendering

Nav.astro was using the #smallbusiness-main-menu id/CSS (designed for
the tall under-logo nav row) while rendered inside #top-menu-container
(the compact top bar), causing items to overflow onto a second line.
Switched to the matching #smallbusiness-top-menu styling and dropped
the extra "Home" link that pushed it over. Single nav bar, as intended.

Splide's core CSS import from Slideshow.astro's frontmatter was being
silently dropped from the build (component-level bare CSS imports
don't bundle the same way layout-level ones do) -- moved it to
BaseLayout.astro where global.css already imports successfully, and
switched to the full theme CSS for real arrow/pagination styling.

Also fixed #slideshow .post-slide: position:absolute with no explicit
top/left fell back to its hypothetical static position (right after
the 354px image), pushing the caption overlay below the visible slide
instead of on top of it. Pinned top:0; left:0 so the margin-based
offset actually anchors to the slide.

Verified visually via headless Chromium screenshot, not just HTML
content -- the earlier "renders the 5 latest posts" check only
confirmed the data was present, not that it displayed correctly.

src/components/Nav.astro

@@ -2,9 +2,8 @@
 import nav from '../data/nav.json';
 ---
 
-<nav id="smallbusiness-main-menu">
+<nav id="smallbusiness-top-menu">
   <ul>
-    <li><a href="/">Home</a></li>
     {nav.map((item: { title: string; href: string }) => (
       <li><a href={item.href}>{item.title}</a></li>
     ))}

src/components/Slideshow.astro

@@ -1,7 +1,6 @@
 ---
 import { Image } from 'astro:assets';
 import { getCollection } from 'astro:content';
-import '@splidejs/splide/css/core';
 
 const allPosts = await getCollection('posts');
 const slides = allPosts
@@ -43,6 +42,7 @@ const slides = allPosts
         interval: 5000,
         arrows: true,
         pagination: true,
+        height: 354,
       }).mount();
     }
   });

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import Nav from '../components/Nav.astro';
 import '../styles/global.css';
+import '@splidejs/splide/dist/css/splide.min.css';
 
 interface Props {
   title: string;

src/pages/blog/index.astro

@@ -12,10 +12,18 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       <div id={`post-${post.id}`}>
         <a href={`/blog/${post.data.slug}`}>
           <h2 class="post-title">{post.data.title}</h2>
-          {post.data.featuredImage && <Image src={post.data.featuredImage} alt={post.data.title} width={150} height={150} />}
+          {post.data.featuredImage && <Image class="post-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={150} height={150} />}
         </a>
         <p>{post.data.excerpt}</p>
       </div>
     ))}
   </div>
 </BaseLayout>
+
+<style>
+  .post-thumbnail {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+  }
+</style>

src/pages/index.astro

@@ -20,10 +20,18 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       <div id={`post-${post.id}`}>
         <a href={`/blog/${post.data.slug}`}>
           <h2 class="post-title">{post.data.title}</h2>
-          {post.data.featuredImage && <Image src={post.data.featuredImage} alt={post.data.title} width={150} height={150} />}
+          {post.data.featuredImage && <Image class="post-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={150} height={150} />}
         </a>
         <p>{post.data.excerpt}</p>
       </div>
     ))}
   </div>
 </BaseLayout>
+
+<style>
+  .post-thumbnail {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+  }
+</style>

src/styles/global.css

@@ -951,6 +951,8 @@ input#s {
     margin: 70px 0 0 465px;
     padding: 20px;
     position: absolute;
+    top: 0;
+    left: 0;
     text-align: left;
     width: 425px;
 	border-radius: 10px 0 0 10px;