From 4906364a6565f24596ba8bc4d2a944e8131e72b2 Mon Sep 17 00:00:00 2001
From: jamesvici <jamesp@vicidial.com>
Date: Tue, 15 Sep 2026 19:15:16 -0400
Subject: [PATCH] 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       |  3 +--
 src/components/Slideshow.astro |  2 +-
 src/layouts/BaseLayout.astro   |  1 +
 src/pages/blog/index.astro     | 10 +++++++++-
 src/pages/index.astro          | 10 +++++++++-
 src/styles/global.css          |  2 ++
 6 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index adce3a1..278e8c1 100644
--- a/src/components/Nav.astro
+++ b/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>
     ))}
diff --git a/src/components/Slideshow.astro b/src/components/Slideshow.astro
index 333a877..e82e1ae 100644
--- a/src/components/Slideshow.astro
+++ b/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();
     }
   });
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 46da678..942e6e7 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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;
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 45557e0..ae50aea 100644
--- a/src/pages/blog/index.astro
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f3a8ff3..acf1f8c 100644
--- a/src/pages/index.astro
+++ b/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>
diff --git a/src/styles/global.css b/src/styles/global.css
index b0b419e..dd51645 100644
--- a/src/styles/global.css
+++ b/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;