diff --git a/package-lock.json b/package-lock.json index c333ca6..2bb5c75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "bloomvalleydemo.dlseitz.dev", + "name": "bvn", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/src/_includes/header.njk b/src/_includes/header.njk index 4312894..21cfb2a 100644 --- a/src/_includes/header.njk +++ b/src/_includes/header.njk @@ -1,37 +1,44 @@
-
\ No newline at end of file diff --git a/src/styles/header-footer.css b/src/styles/header-footer.css index 80ad10e..c5127f4 100644 --- a/src/styles/header-footer.css +++ b/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; - 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; } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 79a8ce9..1b11de3 100644 --- a/src/styles/index.css +++ b/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; - 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); @@ -213,4 +249,11 @@ background-color: #f7f7f7; 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; } \ No newline at end of file