style: Enhance desktop layout and fix navigation

- Center featured section heading with proper spacing
- Adjust logo positioning with left margin
- Improve category list spacing
- Increase figcaption font size for better readability
- Fix navigation link hover states to prevent layout shift
- Ensure consistent spacing in featured images container

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "bloomvalleydemo.dlseitz.dev",
+  "name": "bvn",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

src/_includes/header.njk

@@ -1,17 +1,18 @@
 <header role="banner">
+    <div class="header-container">
+        <div class="header-left">
             <div class="logo">
                 <img
                     src="/images/Client1_LogoPalette2_F0C06D.png"
                     alt="Bloom Valley Nursery Logo">
             </div>
+        </div>
         
+        <div class="header-center">
+            <div class="business-name-container">
                 <p class="business-name">Bloom Valley Nursery</p>
-    
+            </div>
-    <!-- Navigation Bar -->
+            <div class="nav-container">
-    <button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
-        <i class="fa-solid fa-bars fa-2xl"></i>
-    </button>
-
                 <nav role="navigation" aria-label="Main Navigation">
                     <ul>
                         <li>
@@ -28,10 +29,16 @@
                         </li>
                     </ul>
                 </nav>
+            </div>
+        </div>
         
-    <button
+        <div class="header-right">
-        id="shopping-cart"
+            <button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
-        aria-label="Open shopping cart"
+                <i class="fa-solid fa-bars fa-2xl"></i>
-        class="fa-solid fa-cart-shopping fa-xl">
             </button>
+            <button id="shopping-cart" aria-label="Shopping Cart">
+                <i class="fa-solid fa-cart-shopping"></i>
+            </button>
+        </div>
+    </div>
 </header>

src/styles/header-footer.css

@@ -1,36 +1,95 @@
 /* |--↓-↓-↓  Start Header  ↓-↓-↓--| */
 header {
+  padding: 20px;
+  background-color: #bdd4da;
+  border-bottom: 3px solid #96baa0;
+  width: 100%;
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-width: 1400px;
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+  gap: 20px; /* Adds space between columns */
+}
+
+/* Left column - Logo */
+.header-left {
+  flex: 0 0 150px; /* Fixed width for logo */
+  position: relative;
+  z-index: 1;
+}
+
+/* Center column - Business name and navigation */
+.header-center {
+  flex: 1;
+  min-width: 0; /* Prevents flex item from overflowing */
+  max-width: 800px;
+  margin: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
-  padding: 20px;
-  background-color: #bdd4da; /* Light teal */
-  border-bottom: 3px solid #96baa0; /* Pale green for contrast */
 }
 
+/* Right column - Shopping cart */
+.header-right {
+  flex: 0 0 150px; /* Fixed width for shopping cart */
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  z-index: 1;
+}
+
+/* Logo styles */
 header .logo {
-    position: absolute;
+  width: 100%;
-    left: 3vw;
+  max-width: 180px;
-    top: 20px;
+  height: auto;
-    width: auto; /* Maintains aspect ratio */
-    height: auto; /* Constrains the height to 80px */
-    max-width: 20vw;
 }
 
-
 header .logo img {
   display: block;
-  width: 180px;
+  width: 100%;
   height: auto;
-  max-width: 100%;
+  margin-left: 50px;
-  filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); /* Yellow outline effect */
+  filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038);
+}
 
+/* Business name and navigation container */
+.business-name-container {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 15px;
+}
 
+.nav-container {
+  width: 100%;
+}
+
+/* Shopping cart button */
+#shopping-cart {
+  position: static;
+  padding: 15px;
+  border-radius: 10px;
+  background-color: #f7f7f7;
+  color: #014038;
+  cursor: pointer;
+  z-index: 5;
+  transition: all 0.3s ease;
+  box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .business-name {
   font-family: 'Georgia', serif;
+  display: block;
   font-size: 2.8rem;
   color: #014038; /* Dark green for the title */
   margin: 10px 0;
@@ -186,6 +245,10 @@ nav ul, #footer-nav ul {
   margin: 0;
 }
 
+nav ul {
+  gap: 40px;
+}
+
 nav ul li, #footer-nav ul li {
   margin: 0 20px;
   border-radius: 5px;
@@ -403,35 +466,6 @@ text-align: center;
   cursor: pointer;
 }
 
-.perk-item,
-.testimonial,
-.featured-item {
-  display: none; /* Hide all by default */
-}
-
-.perk-item.visible,
-.testimonial.visible,
-.featured-item.active {
-  display: block; /* Show visible or active items */
-}
-
-#featured-images {
-  overflow: hidden; /* Hide anything outside the container */
-  text-align: center; /* Center align content if necessary */
-  width: 100%; /* Match the width of the container */
-  height: auto; /* Let the height adapt to content */
-}
-
-#featured-images img {
-  display: none; /* Hide all items initially */
-  max-width: 100%; /* Ensure images are responsive */
-  height: auto; /* Maintain aspect ratio */
-  background-color: #96baa0;
-  border: solid #014038;
-  border-radius: 5px;
-  padding: 5px;
-}
-
 .visible {
   display: block;
 } 

src/styles/index.css

@@ -1,13 +1,22 @@
+
+.perk-item,
+.testimonial,
+.featured-item {
+  display: none; /* Hide all by default */
+}
+
+.perk-item.visible,
+.testimonial.visible,
+.featured-item.active {
+  display: block; /* Show visible or active items */
+}
+
 #left-aside,
 #right-aside {
   flex: 1;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
-#featured-container {
-  flex: 2;
-}
-
 #left-aside {
   display: flex;
   flex-direction: column;
@@ -41,11 +50,12 @@
   border: solid #014038;
   border-radius: 10px;
   padding: 5px 10px;
-  white-space: wrap;
+  white-space: normal;
-  max-height: 250px;
+  max-height: 175px;
-  min-height: 250px;
+  min-height: 175px;
+  max-width: 400px;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
-  text-align:
+  text-align: center;
 }
 
 #perks-heading {
@@ -57,10 +67,13 @@
 
 #featured-container {
   display: flex;
+  flex: 2;
   flex-direction: column;
+  align-items: center;
   text-align: center;
-  margin-right: 40px;
   margin-top: 10px;
+  margin-left: 50px;
+  margin-right: 50px;
 }
 
 #featured-container h2 {
@@ -82,8 +95,9 @@
   background-color: #96baa0;
   border: solid #f7f7f7;
   border-radius: 10px;
-  padding-left: 20px;
+  margin-left: 30px;
-  transform: translateX(30px);
+  width: fit-content;
+  padding: 0 20px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 }
   
@@ -91,20 +105,21 @@
   list-style-type: none;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  padding: 0;
 }
 
-#featured-image ul li {
+#featured-images {
-  align-content: space-between;
+  border: solid #96baa0;
+  border-radius: 10px;
 }
 
-#featured-images ul li a {
+
+#featured-images a {
   color: #014038;
   background-color: #f7f7f7;
   border-radius: 10px;
   padding: 5px 10px;
-}
-
-#featured-images a {
   display: block;
   text-align: center;
   font-size: 1.4rem;
@@ -115,10 +130,30 @@
   display: block;
   margin: 0 auto;
   margin-bottom: 10px;
-  margin-right: 45px;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
+#featured-images {
+  overflow: hidden; /* Hide anything outside the container */
+  /*text-align: center; 
+  width: 100%; */
+  height: auto; /* Let the height adapt to content */
+}
+
+figcaption {
+  font-size: 1.2rem;
+}
+
+#featured-images img {
+  display: none; /* Hide all items initially */
+  max-width: 100%; /* Ensure images are responsive */
+  height: auto; /* Maintain aspect ratio */
+  background-color: #96baa0;
+  border: solid #014038;
+  border-radius: 5px;
+  padding: 5px;
+}
+
 #testimonials-feature{
   background-color: #96baa0;
   color: #014038;
@@ -126,7 +161,7 @@
   border-radius: 10px;
   padding: 5px 10px;
   margin-top: 10px;
-  white-space: wrap;
+  white-space: normal;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
@@ -141,8 +176,10 @@
   border: solid #014038;
   border-radius: 5px;
   padding: 5px 10px;
-  white-space: wrap;
+  white-space: normal;
-  min-height: 250px;
+  max-height: 175px;
+  max-width: 400px;
+  min-height: 175px;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
   text-align: center;
 }
@@ -152,11 +189,9 @@
   flex-direction: column;
   align-items: center;
   background-color: #f0c06d;
-  width: 100%;
-  height: auto;
   padding: 5px 10px;
-  margin-left: 40px;
   margin-top: 10px;
+  margin-left: 20px;
   border: solid #f7f7f7;
   border-radius: 10px;
 }
@@ -169,6 +204,7 @@
   padding: 5px 10px;
   margin-top: 5px;
   text-align: center;
+  width: 90%;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
@@ -188,6 +224,7 @@
   flex-direction: column;
   align-items: center;
   list-style-type: none;
+  gap: 5px;
 }
 
 .categories ul li {
@@ -195,7 +232,6 @@
   border-radius: 10px;
   background-color: #96baa0;
   margin-top: 20px;
-  margin-right: 35px;
   min-width: 100%;
   transition: background-color 0.3s ease, color 0.3s ease;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
@@ -214,3 +250,10 @@
   color: #014038; 
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 }
+
+.categories ul li a:hover {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+}