dereklseitz/BloomValleyNursery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Enhance desktop layout and fix navigation

Browse Source 
- 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
This commit is contained in:
Derek L. Seitz
2025-09-01 17:52:15 -05:00
parent 3e210572a2
commit 8f09695bff
4 changed files with 187 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

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

27
src/_includes/header.njk
View File

@@ -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>
<!-- Navigation Bar -->
<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>
</div>
<div class="nav-container">
<nav role="navigation" aria-label="Main Navigation">
<ul>
<li>
@@ -28,10 +29,16 @@
</li>
</ul>
</nav>
</div>
</div>
<button
id="shopping-cart"
aria-label="Open shopping cart"
class="fa-solid fa-cart-shopping fa-xl">
<div class="header-right">
<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>
<button id="shopping-cart" aria-label="Shopping Cart">
<i class="fa-solid fa-cart-shopping"></i>
</button>
</div>
</div>
</header>

120
src/styles/header-footer.css
View File

@@ -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;
left: 3vw;
top: 20px;
width: auto; /* Maintains aspect ratio */
height: auto; /* Constrains the height to 80px */
max-width: 20vw;
width: 100%;
max-width: 180px;
height: auto;
}
header .logo img {
display: block;
width: 180px;
width: 100%;
height: auto;
max-width: 100%;
filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); /* Yellow outline effect */
margin-left: 50px;
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;
}

93
src/styles/index.css
View File

@@ -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;
max-height: 250px;
min-height: 250px;
white-space: normal;
max-height: 175px;
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;
transform: translateX(30px);
margin-left: 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 {
align-content: space-between;
#featured-images {
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;
min-height: 250px;
white-space: normal;
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;
}