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

Feat, Fix, and Refactor: Consolidate index page changes

Browse Source 
Feat: Refactor index.njk to be data-driven and fix related rendering issues.

Fix: Resolve layout and functionality bugs, including broken JavaScript for the featured item carousel, layout shifts in category navigation, and CSS issues with the testimonial carousel.

Refactor: Centralize global styles using CSS custom property variables and clean up redundant CSS rules.
This commit is contained in:
Derek L. Seitz
2025-09-06 19:29:59 -05:00
parent e166edb44a
commit f30c846e9e
14 changed files with 395 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/credits.njk
View File

@@ -25,7 +25,7 @@ pageScripts:
<div> <div>
<ul class="credits-list"> <ul class="credits-list">
{% for credit in credits.credits %} {% for credit in credits.CREDITS %}
<li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}"> <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
<div class="thumb"> <div class="thumb">
<img class="thumb-inline" <img class="thumb-inline"

0
src/images/_m-thumbs/patio/fire-pit.jpg → src/images/_m-thumbs/patio/firepit.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

0
src/images/_m-thumbs/trees/maple-tree.jpg → src/images/_m-thumbs/trees/japanese-maple-tree.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

0
src/images/_s-thumbs/patio/fire-pit.jpg → src/images/_s-thumbs/patio/firepit.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
src/images/_s-thumbs/trees/maple-tree.jpg → src/images/_s-thumbs/trees/japanese-maple-tree.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

200
src/index.njk
View File

@@ -1,6 +1,7 @@
--- ---
layout: base.njk layout: base.njk
metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev" metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
seoIndexing: false
title: "Landing - Bloom Valley Nursery Demo" title: "Landing - Bloom Valley Nursery Demo"
stylesheet: stylesheet:
- "/styles/variables.css" - "/styles/variables.css"
@@ -16,144 +17,71 @@ pageScripts:
--- ---
<!-- Main Content Section --> <!-- Main Content Section -->
<div id="left-side">
<div id="left-aside">
<section id="perks-feature-container" >
<h2 id="perks-heading">Shopper Perks</h2>
<div class="perk-item">
<h3>- 50% Off Deal -</h3>
<p>New subscribers to our newsletter this month will receive a coupon for 50% off their first purchase! Click here for details! Terms and conditions apply.</p>
</div>
<div class="perk-item">
<h3>Exceptional Quality</h3>
<p>Every plant is carefully cultivated from seed or bulb to maturity, offering you vibrant, healthy specimens.</p>
</div>
<div class="perk-item">
<h3>Expert Guidance</h3>
<p>Our knowledgeable team is here to help, from selecting the perfect plants to offering planting tips.</p>
</div>
<div class="perk-item">
<h3>Eco-Friendly Practices</h3>
<p>We prioritize sustainability by using environmentally conscious growing methods, so you can feel good about your choices.</p>
</div>
</section>
<section id="testimonials-feature" > <!-- Promo Feature -->
<h2>What Others Say</h2> <section id="promos-container">
<div class="testimonial-container"> <h2 id="promos-heading">Shopper Promos</h2>
<div class="testimonial"> {% for promo in promotions.PROMOS %}
<p>"My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!"</p> <div id="{{ promo.id }}" class="promo-item">
<h3>- Caroline N.</h3> <h3 class="promo-title">{{ promo.title }}</h3>
</div> <p class="promo-description">{{ promo.description }}</p>
<div class="testimonial"> <button type="button" class="ctaButton">{{ promo.ctaText }}</button>
<p>"Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!"</p> </div>
<h3>- Morris F.</h3> {% endfor %}
</div> </section>
<div class="testimonial">
<p>"Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!"</p> <!-- Testimonials Feature -->
<h3>- Gladis B.</h3> <section id="testimonials-container">
</div> <h2 id="testimonials-heading">What Others Say</h2>
</div> {% for item in testimonials.TESTIMONIALS %}
</section> <div id="{{ id }}" class="testimonial-item">
<h3 class="client-name">{{ item.clientName }} said<h3>
<p class="client-quote">"{{ item.testimonial }}"</p>
</div>
{% endfor %}
</section>
</div> </div>
<!--<div id="featured-images"> <div id="center">
<div class="featured-item"> <section id="featured-container">
<img src="image1.jpg" alt="Feature 1"> <h2 class="featured-heading">Featured Items</h2>
</div>--> <ul id="featured-list">
{% for item in inventory.INVENTORY %}
{% if item.isFeatured %}
<li>
<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
<a href="/gallery/">
<h3 class="product-name">{{ item.productName }}</h3>
<figure>
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
</figure>
<p class="price">${{ item.price }}</p>
</a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</section>
</div>
<section id="featured-container" > <div id="right-side">
<h2> This Week's Featured Items</h2> <nav id="category-nav">
<ul id="featured-images"> <div id="category-nav-container">
<li> <h2>Shop by Category</h2>
<a href="/gallery/" id="featured-aloe-plant"> <div class="categories">
<figure> <ul>
<img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item"> <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
<figcaption>Aloe Vera / Turquoise Planter</figcaption> <li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
</figure> <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
</a> <li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
</li> <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
<li> <li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
<a href="/gallery/" id="featured-bird-house"> <li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
<figure> </ul>
<img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item"> </div>
<figcaption>Handmade Wooden Birdhouse - Blue</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-apple-tree">
<figure>
<img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">
<figcaption>Red Gala Apple Sapling - Burlap Bound</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-potting-soil">
<figure>
<img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">
<figcaption>Potting Soil - 10 lbs Bag</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-spider-plant">
<figure>
<img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">
<figcaption>Spider Plant / Light Gray Planter</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-birch-tree">
<figure>
<img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">
<figcaption>Silver Birch Sapling - Containerized</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-watering-can">
<figure>
<img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">
<figcaption>Painted Aluminum Watering Can - Blue</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-string-of-pearls">
<figure>
<img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">
<figcaption>String-of-Pearls Plant / Hanging White Planter</figcaption>
</figure>
</a>
</li>
<li>
<a href="/gallery/" id="featured-maple-tree">
<figure>
<img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">
<figcaption>Japanese Maple Sapling - Burlap Bound</figcaption>
</figure>
</a>
</li>
</ul>
</section>
<nav id="right-aside">
<div id="category-nav-container">
<h2>Shop by Category</h2>
<div class="categories">
<ul>
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
</ul>
</div> </div>
</div> </nav>
</nav> </div>
<!-- Content specific to this page goes here -->

37
src/scripts/script.js
View File

@@ -52,27 +52,27 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.appendChild(modal); document.body.appendChild(modal);
} }
// ================== SHOPPER PERKS CAROUSEL ================== // ================== SHOPPER PROMO CAROUSEL ==================
const perks = document.querySelectorAll(".perk-item"); const promo = document.querySelectorAll(".promo-item");
let currentIndexPerks = 0; let currentIndexPromo = 0;
function showNextPerk() { function showNextPromo() {
perks.forEach(perk => { promo.forEach(promo => {
perk.classList.remove("visible"); promo.classList.remove("visible");
perk.style.display = "none"; promo.style.display = "none";
}); });
perks[currentIndexPerks].classList.add("visible"); promo[currentIndexPromo].classList.add("visible");
perks[currentIndexPerks].style.display = "block"; promo[currentIndexPromo].style.display = "block";
currentIndexPerks = (currentIndexPerks + 1) % perks.length; currentIndexPromo = (currentIndexPromo + 1) % promo.length;
} }
showNextPerk(); showNextPromo();
setInterval(showNextPerk, 2250); setInterval(showNextPromo, 2250);
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ================== // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
const testimonials = document.querySelectorAll(".testimonial"); const testimonials = document.querySelectorAll(".testimonial-item");
let currentIndexTestimonials = 0; let currentIndexTestimonials = 0;
function showNextTestimonial() { function showNextTestimonial() {
@@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
setInterval(showNextTestimonial, 3500); setInterval(showNextTestimonial, 3500);
// ================== FEATURED ITEMS CAROUSEL ================== // ================== FEATURED ITEMS CAROUSEL ==================
const featuredItems = document.querySelectorAll("#featured-images .featured-item"); /*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
let currentIndex = 0; let currentIndex = 0;
function showNextItem() { function showNextItem() {
@@ -101,12 +101,13 @@ document.addEventListener("DOMContentLoaded", () => {
} }
featuredItems[currentIndex].classList.add("active"); featuredItems[currentIndex].classList.add("active");
setInterval(showNextItem, 3000); setInterval(showNextItem, 3000);*/
// ================== UPDATED FEATURED ITEMS CAROUSEL ================== // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
const featuredItems = document.querySelectorAll(".featured-card");
let currentIndexFeatured = 0; let currentIndexFeatured = 0;
function updateFeaturedImages() { function updateFeaturedItems() {
featuredItems.forEach((item, index) => { featuredItems.forEach((item, index) => {
const text = item.closest('a'); const text = item.closest('a');
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none"); if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
@@ -118,9 +119,9 @@ document.addEventListener("DOMContentLoaded", () => {
function showNextFeatured() { function showNextFeatured() {
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length; currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
updateFeaturedImages(); updateFeaturedItems();
} }
updateFeaturedImages(); updateFeaturedItems();
setInterval(showNextFeatured, 3000); setInterval(showNextFeatured, 3000);
}); });

106
src/styles/about.css
View File

@@ -1,4 +1,4 @@
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */ /* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
.about { .about {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -17,39 +17,36 @@
display: block; display: block;
align-items: center; align-items: center;
width: 25vw; width: 25vw;
background-color:#f0c06d; background-color: var(--color-soft-golden);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
#phone, #phone,
#hours { #hours {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #bdd4da; border: solid var(--color-light-teal);
border-radius: 10px; border-radius: 10px;
margin: 5px 10px; margin: 5px 10px;
} }
#business-info h3, #business-info h3,
#feedback-intro h2 { #feedback-intro h2 {
font-size: 1.875rem; font-size: 1.875rem;
text-align: center; text-align: center;
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
-0.5px -0.5px 2px #014038, /* Top-left base shadow */ -0.5px -0.5px 2px var(--color-dark-green),
-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ -0.5px 0.5px 2px var(--color-dark-green),
0.5px -0.5px 2px #014038; /* Top-right base shadow */ 0.5px -0.5px 2px var(--color-dark-green);
color: #f7f7f7; color: var(--color-destin-sand);
background-color: #96baa0; background-color: var(--color-mid-green);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
max-width: 75vw; max-width: 75vw;
border-radius: 10px; border-radius: 10px;
padding-left: 10px; padding-left: 10px;
transform: translateX(0px); transform: translateX(0px);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
#business-info p { #business-info p {
@@ -59,13 +56,13 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
#business-info h4 { #business-info h4 {
text-align: center; text-align: center;
background-color: #bdd4da; background-color: var(--color-light-teal);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 15px; border-radius: 15px;
padding: 0 10px; padding: 0 10px;
width: 50%; width: 50%;
margin-left: 22.5%; margin-left: 22.5%;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
#story { #story {
@@ -78,23 +75,23 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
} }
#story h2 { #story h2 {
background-color: #96baa0; background-color: var(--color-mid-green);
color: #f7f7f7; color: var(--color-destin-sand);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 15px; border-radius: 15px;
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
-0.5px -0.5px 2px #014038, /* Top-left base shadow */ -0.5px -0.5px 2px var(--color-dark-green),
-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ -0.5px 0.5px 2px var(--color-dark-green),
0.5px -0.5px 2px #014038; /* Top-right base shadow */ 0.5px -0.5px 2px var(--color-dark-green);
width: 50%; width: 50%;
padding: 5px 10px; padding: 5px 10px;
text-align: center; text-align: center;
margin-right: 12.5%; margin-right: 12.5%;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
#story p { #story p {
color: #014038; color: var(--color-dark-green);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: bold; font-weight: bold;
} }
@@ -104,27 +101,27 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #96baa0; background-color: var(--color-mid-green);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 15px; border-radius: 15px;
width: 90vw; width: 90vw;
margin-top: 30px; margin-top: 30px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
#feedback h2 { #feedback h2 {
background-color: #a4ccd6; background-color: var(--color-light-teal);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
width: 50vw; width: 50vw;
padding: 5px 10px; padding: 5px 10px;
text-align: center; text-align: center;
margin-left: 25vw; margin-left: 25vw;
margin-right: 25vw; margin-right: 25vw;
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
-0.5px -0.5px 2px #014038, /* Top-left base shadow */ -0.5px -0.5px 2px var(--color-dark-green),
-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ -0.5px 0.5px 2px var(--color-dark-green),
0.5px -0.5px 2px #014038; /* Top-right base shadow */ 0.5px -0.5px 2px var(--color-dark-green);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
@@ -135,7 +132,6 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
margin-left: 7.5vw; margin-left: 7.5vw;
margin-right: 7.5vw; margin-right: 7.5vw;
} }
#feedback p { #feedback p {
@@ -147,7 +143,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
font-weight: bold; font-weight: bold;
} }
#feedback-form form{ #feedback-form form {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
@@ -166,8 +162,8 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
} }
#customer-info input { #customer-info input {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 15px; border-radius: 15px;
width: 90%; /* Ensures the input fields fill the section width */ width: 90%; /* Ensures the input fields fill the section width */
height: 30px; /* Adjusts height to match the textarea */ height: 30px; /* Adjusts height to match the textarea */
@@ -185,8 +181,8 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
#customer-message #message-field textarea { #customer-message #message-field textarea {
width: 50vw; /* Takes full width of the section */ width: 50vw; /* Takes full width of the section */
height: 30vh; /* Adjust height as needed */ height: 30vh; /* Adjust height as needed */
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 15px; border-radius: 15px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
} }
@@ -200,10 +196,10 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
#form-submit { #form-submit {
padding: 10px 20px; padding: 10px 20px;
background-color: #bdd4da; background-color: var(--color-light-teal);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
color: #014038; color: var(--color-dark-green);
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
@@ -211,7 +207,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
} }
#form-submit:hover { #form-submit:hover {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
} }
/* | ↑-↑-↑ End About.html ↑-↑-↑--| */ /* | ↑-↑-↑ End About.html ↑-↑-↑--| */

15
src/styles/base.css
View File

@@ -13,18 +13,16 @@ body {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #bdd4da; /* Sky Bloom */ background-color: var(--color-light-teal); /* Sky Bloom */
} }
body h1 { body h1 {
text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ -0.5px -0.5px .5px var(--color-destin-sand), /* Top-left top shadow */
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ -0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-left top shadow */
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ 0.5px -0.5px .5px var(--color-destin-sand); /* Top-right top shadow */
} }
/* Title Large (Arial Bold 30px) */ /* Title Large (Arial Bold 30px) */
h1 { h1 {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
@@ -72,12 +70,11 @@ figcaption {
} }
@media (max-width: 780px) { @media (max-width: 780px) {
html{ html {
font-size: 14px; font-size: 14px;
} }
} }
main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

82
src/styles/community.css
View File

@@ -1,4 +1,4 @@
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */ /* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
.community { .community {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -10,17 +10,14 @@
h1 { h1 {
display: block; display: block;
font-size: 2.3rem; font-size: 2.3rem;
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #96baa0; border: solid var(--color-mid-green);
border-radius: 15px; border-radius: 15px;
color: #014038; color: var(--color-dark-green);
text-decoration: underline; text-decoration: underline;
text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ text-shadow: var(--text-outline-heading);
-0.5px -0.5px 1px #014038, /* Top-left base shadow */
-0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
0.5px -0.5px 1px #014038; /* Top-right base shadow */
padding: 5px 100px; padding: 5px 100px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
#calendar-events-container { #calendar-events-container {
@@ -30,14 +27,14 @@ h1 {
border: none; border: none;
} }
.calendar iframe{ .calendar iframe {
width: 975px; width: 975px;
height: 750px; height: 750px;
margin-top: 25px; margin-top: 25px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #bdd4da; background-color: var(--color-light-teal);
border-radius: 15px; border-radius: 15px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
.upcoming-events { .upcoming-events {
@@ -51,30 +48,30 @@ h1 {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: #f0c06d; background-color: var(--color-soft-golden);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 15px; border-radius: 15px;
padding: 10px; padding: 10px;
width: 80vw; width: 80vw;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
.events h2 { .events h2 {
font-size: 1.875rem; font-size: 1.875rem;
text-align: center; text-align: center;
text-shadow: 0.5px 0.5px .5px #014038, /* Bottom-right top shadow */ text-shadow: 0.5px 0.5px .5px var(--color-dark-green),
-0.5px -0.5px .5px #014038, /* Top-left top shadow */ -0.5px -0.5px .5px var(--color-dark-green),
-0.5px 0.5px .5px #014038, /* Bottom-left top shadow */ -0.5px 0.5px .5px var(--color-dark-green),
0.5px -0.5px .5px #014038; /* Top-right top shadow */ 0.5px -0.5px .5px var(--color-dark-green);
color: #f7f7f7; color: var(--color-destin-sand);
background-color: #96baa0; background-color: var(--color-mid-green);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: fit-content; width: fit-content;
padding: 0 50px; padding: 0 50px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
.upcoming-events { .upcoming-events {
@@ -82,41 +79,39 @@ h1 {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: #CADCD0; background-color: var(--color-pale-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 15px; border-radius: 15px;
padding: 0px 20px 10px 20px; padding: 0px 20px 10px 20px;
width: 95%; width: 95%;
margin-top: 20px; margin-top: 20px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
.zoho-event { .zoho-event {
background-color:#f7f7f7; background-color: var(--color-destin-sand);
border: solid #014038 2px; border: solid var(--color-dark-green) 2px;
border-radius: 15px; border-radius: 15px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
max-width: 1200px; max-width: 1200px;
} }
.zoho-event h3 { .zoho-event h3 {
font-size: 1.875rem; font-size: 1.875rem;
text-align: center; text-align: center;
text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ text-shadow: 0.5px 0.5px .5px var(--color-destin-sand),
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ -0.5px -0.5px .5px var(--color-destin-sand),
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ -0.5px 0.5px .5px var(--color-destin-sand),
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ 0.5px -0.5px .5px var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
background-color: #bdd4da; background-color: var(--color-light-teal);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: fit-content; width: fit-content;
padding: 0 50px; padding: 0 50px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
.zoho-event p { .zoho-event p {
@@ -137,22 +132,21 @@ h1 {
.event-list ul { .event-list ul {
list-style-type: none; list-style-type: none;
} }
.event-list li { .event-list li {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #bdd4da; border: solid var(--color-light-teal);
border-radius: 15px; border-radius: 15px;
text-align: center; text-align: center;
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
.events strong { .events strong {
color:#014038; color: var(--color-dark-green);
font-size: 1.1rem; font-size: 1.1rem;
} }
/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */ /* | ↑-↑-↑ End Community.html ↑-↑-↑--| */

80
src/styles/gallery.css
View File

@@ -1,4 +1,4 @@
/* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */ /* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */
#main-gallery { #main-gallery {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -10,31 +10,20 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 95vw; width: 95vw;
gap: 20px gap: 20px;
} }
#product-carousel-feature h2 { #product-carousel-feature h2 {
font-size: 1.875rem; font-size: 1.875rem;
text-align: center; text-align: center;
text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ text-shadow: var(--text-shadow-layered);
-0.5px -0.5px 1px #014038, /* Top-left base shadow */ color: var(--color-destin-sand);
-0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ background-color: var(--color-mid-green);
0.5px -0.5px 1px #014038, /* Top-right base shadow */ border: solid var(--color-destin-sand);
0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */
-0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */
-0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */
0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */
0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
color: #f7f7f7;
background-color: #96baa0;
border: solid #f7f7f7;
border-radius: 10px; border-radius: 10px;
padding-left: 20px; padding-left: 20px;
transform: translateX(30px); transform: translateX(30px);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
#product-category-card { #product-category-card {
@@ -68,7 +57,7 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
white-space: wrap; white-space: wrap;
background-color: #f7f7f7; /* Optional background */ background-color: var(--color-destin-sand); /* Optional background */
} }
.product-card img { .product-card img {
@@ -81,7 +70,7 @@
#scroll-left, #scroll-right { #scroll-left, #scroll-right {
cursor: pointer; /* Show pointer to indicate clickable buttons */ cursor: pointer; /* Show pointer to indicate clickable buttons */
background-color: #014038; /* Dark green background */ background-color: var(--color-dark-green); /* Dark green background */
color: white; color: white;
border: none; border: none;
padding: 10px; padding: 10px;
@@ -108,13 +97,13 @@
#main-gallery #right-aside h2 { #main-gallery #right-aside h2 {
font-size: 1.675rem; font-size: 1.675rem;
background-color: #bdd4da; background-color: var(--color-light-teal);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 5px; border-radius: 5px;
padding: 0 5px; padding: 0 5px;
white-space: nowrap; white-space: nowrap;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#main-gallery .categories ul { #main-gallery .categories ul {
@@ -126,25 +115,25 @@
} }
#main-gallery .categories ul li { #main-gallery .categories ul li {
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 5px; border-radius: 5px;
background-color: #96baa0; background-color: var(--color-mid-green);
margin-top: 20px; margin-top: 20px;
margin-right: 35px; margin-right: 35px;
min-width: 100%; min-width: 100%;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#main-gallery .categories a { #main-gallery .categories a {
color: #014038; color: var(--color-dark-green);
font-size: 1.3rem; font-size: 1.3rem;
} }
button#cart-details { button#cart-details {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 15px; border-radius: 15px;
color: #014038; color: var(--color-dark-green);
font-weight: bold; font-weight: bold;
font-size: 1.4em; font-size: 1.4em;
text-align: center; /* Align text horizontally */ text-align: center; /* Align text horizontally */
@@ -152,7 +141,7 @@ button#cart-details {
padding: 0 15px; /* Horizontal padding for spacing */ padding: 0 15px; /* Horizontal padding for spacing */
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
transform: translateX(-15vw) translateY(-5vh); transform: translateX(-15vw) translateY(-5vh);
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
display: flex; /* Flexbox ensures content alignment */ display: flex; /* Flexbox ensures content alignment */
@@ -161,34 +150,33 @@ button#cart-details {
} }
button#cart-details:hover { button#cart-details:hover {
background-color: #014033; background-color: var(--color-dark-green);
color: #f7f7f7; color: var(--color-destin-sand);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 15px; border-radius: 15px;
} }
.product-card { .product-card {
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
.add-to-cart-btn { .add-to-cart-btn {
cursor: pointer; cursor: pointer;
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border: solid #014038; border: solid var(--color-dark-green);
color: #014038; color: var(--color-dark-green);
font-weight: bold; font-weight: bold;
border-radius: 5px; border-radius: 5px;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
.add-to-cart-btn:hover { .add-to-cart-btn:hover {
background-color: #014038; background-color: var(--color-dark-green);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
color: #f7f7f7; color: var(--color-destin-sand);
border-radius: 5px; border-radius: 5px;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */ /* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */

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

@@ -1,8 +1,8 @@
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */ /* |--↓-↓-↓ Start Header ↓-↓-↓--| */
header { header {
padding: 20px; padding: 20px;
background-color: #bdd4da; background-color: var(--color-light-teal);
border-bottom: 3px solid #96baa0; border-bottom: 3px solid var(--color-mid-green);
width: 100%; width: 100%;
} }
@@ -56,7 +56,7 @@ header .logo img {
width: 100%; width: 100%;
height: auto; height: auto;
margin-left: 50px; margin-left: 50px;
filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
} }
/* Business name and navigation container */ /* Business name and navigation container */
@@ -75,12 +75,12 @@ header .logo img {
position: static; position: static;
padding: 15px; padding: 15px;
border-radius: 10px; border-radius: 10px;
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
border: none; border: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -91,19 +91,16 @@ header .logo img {
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
display: block; display: block;
font-size: 3.6rem; font-size: 3.6rem;
color: #014038; /* Dark green for the title */ color: var(--color-dark-green); /* Dark green for the title */
margin: 10px 0; margin: 10px 0;
text-align: center; text-align: center;
text-shadow: 0.5px 0.5px 1px #f7f7f7, /* Bottom-right top shadow */ text-shadow: var(--text-outline-heading);
-0.5px -0.5px 1px #f7f7f7, /* Top-left top shadow */
-0.5px 0.5px 1px #f7f7f7, /* Bottom-left top shadow */
0.5px -0.5px 1px #f7f7f7; /* Top-right top shadow */
} }
header p.tagline { header p.tagline {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-size: 1.4rem; font-size: 1.4rem;
color: #96baa0; /* Pale green for the tagline */ color: var(--color-mid-green); /* Pale green for the tagline */
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
@@ -167,7 +164,7 @@ header p.tagline {
display: block; display: block;
background: none; background: none;
border: none; border: none;
color: #014038; color: var(--color-dark-green);
cursor: pointer; cursor: pointer;
} }
@@ -176,9 +173,9 @@ header p.tagline {
display: none; display: none;
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border-radius: 5px; border-radius: 5px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
nav.is-open { nav.is-open {
@@ -205,11 +202,11 @@ header p.tagline {
nav, #footer-nav { nav, #footer-nav {
margin-top: 20px; margin-top: 20px;
background-color: #f7f7f7; /* White for navigation background */ background-color: var(--color-destin-sand); /* White for navigation background */
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
width: 100%; /* Ensures the nav spans the width of the header */ width: 100%; /* Ensures the nav spans the width of the header */
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
#shopping-cart { #shopping-cart {
@@ -218,12 +215,12 @@ nav, #footer-nav {
right: 100px; right: 100px;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
border: none; border: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -231,10 +228,10 @@ nav, #footer-nav {
} }
#shopping-cart:hover { #shopping-cart:hover {
background-color: #014038; background-color: var(--color-dark-green);
color: #96baa0; color: var(--color-mid-green);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
nav ul, #footer-nav ul { nav ul, #footer-nav ul {
@@ -257,13 +254,13 @@ nav ul li, #footer-nav ul li {
.current-page { .current-page {
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
color: #014038; color: var(--color-dark-green);
background-color: #96baa0; background-color: var(--color-mid-green);
border: none; border: none;
text-decoration: underline; text-decoration: underline;
white-space: wrap; white-space: wrap;
text-align: center; text-align: center;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
.community-link { .community-link {
@@ -274,7 +271,7 @@ nav ul li a, #footer-nav ul li a {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
color: #014038; color: var(--color-dark-green);
text-decoration: underline; text-decoration: underline;
padding: 8px 15px; padding: 8px 15px;
border-radius: 10px; border-radius: 10px;
@@ -282,14 +279,14 @@ nav ul li a, #footer-nav ul li a {
} }
nav ul li a:hover, #footer-nav ul li a:hover { nav ul li a:hover, #footer-nav ul li a:hover {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
border: solid .5px #014038; border: solid .5px var(--color-dark-green);
padding: 7px 14px; padding: 7px 14px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */ /* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
#footer { #footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -310,7 +307,7 @@ nav ul li a:hover, #footer-nav ul li a:hover {
padding: 5px 10px; padding: 5px 10px;
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
} }
button#submit-btn { button#submit-btn {
@@ -318,25 +315,25 @@ button#submit-btn {
padding: 5px 10px; padding: 5px 10px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-subtle);
z-index: 5; z-index: 5;
} }
footer div label { footer div label {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
color: #014038 color: var(--color-dark-green);
} }
#newsletter-form { #newsletter-form {
display: inline-block; display: inline-block;
background-color: #f0c06d; background-color: var(--color-soft-golden);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
width: 60%; width: 60%;
padding: 5px; padding: 5px;
text-align: center; text-align: center;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
/* #footer-nav { /* #footer-nav {
@@ -348,7 +345,7 @@ footer div label {
list-style-type: none; list-style-type: none;
flex-direction: row; flex-direction: row;
margin-top: 20px; margin-top: 20px;
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border-radius: 5px; border-radius: 5px;
width: fit-content; width: fit-content;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -364,8 +361,8 @@ footer div label {
#footer-nav ul li .current-page { #footer-nav ul li .current-page {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
color: #014038; color: var(--color-dark-green);
background-color: #96baa0; background-color: var(--color-mid-green);
text-decoration: underline; text-decoration: underline;
} }
@@ -373,7 +370,7 @@ footer div label {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
color: #014038; color: var(--color-dark-green);
text-decoration: none; text-decoration: none;
padding: 8px 15px; padding: 8px 15px;
border-radius: 5px; border-radius: 5px;
@@ -381,9 +378,9 @@ footer div label {
} }
#footer-nav ul li a:hover { #footer-nav ul li a:hover {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
} */ } */
@@ -410,13 +407,13 @@ text-align: center;
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
padding: 0 10px; padding: 0 10px;
color: #014038; color: var(--color-dark-green);
} }
#social-media ul li a { #social-media ul li a {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-size: 1rem; font-size: 1rem;
color: #014038; /* Dark green for the links */ color: var(--color-dark-green); /* Dark green for the links */
text-decoration: none; text-decoration: none;
padding: 8px 15px; padding: 8px 15px;
border-radius: 5px; border-radius: 5px;
@@ -424,10 +421,9 @@ text-align: center;
} }
#social-media ul li a:hover { #social-media ul li a:hover {
background-color: #f0c06d; background-color: var(--color-soft-golden);
color: #f7f7f7; color: var(--color-destin-sand);
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#copyright { #copyright {
@@ -473,4 +469,4 @@ text-align: center;
.visible { .visible {
display: block; display: block;
} }

181
src/styles/index.css
View File

@@ -1,68 +1,68 @@
.perk-item, .promo-item,
.testimonial, .testimonial-item,
.featured-item { .featured-item {
display: none; /* Hide all by default */ display: none; /* Hide all by default */
} }
.perk-item.visible, .promo-item.visible,
.testimonial.visible, .testimonial-item.visible,
.featured-item.active { .featured-item.active {
display: block; /* Show visible or active items */ display: block; /* Show visible or active items */
} }
#left-aside, #left-side,
#right-aside { #category-nav {
flex: 1; flex: 1;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#left-aside { #left-side {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f0c06d; background-color: var(--color-soft-golden);
border: solid #f7f7f7; border: solid var(--color-destin-sand);
padding: 5px 10px; padding: 5px 10px;
margin-top: 10px; margin-top: 10px;
border-radius: 10px; border-radius: 10px;
} }
#left-aside h2 { #left-side h2 {
border: solid #014038; border: solid var(--color-dark-green);
background-color: #bdd4da; background-color: var(--color-light-teal);
border-radius: 10px; border-radius: 10px;
} }
#perks-feature-container { #promos-container {
background-color: #96baa0; background-color: var(--color-mid-green);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
margin-top: 5px; margin-top: 5px;
text-align: center; text-align: center;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
.perk-item { .promo-item {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
white-space: normal; white-space: normal;
max-height: 175px; max-height: 175px;
min-height: 175px; min-height: 175px;
max-width: 400px; max-width: 400px;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
text-align: center; text-align: center;
} }
#perks-heading { #promos-heading, #testimonials-heading {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1.875rem; /* 30px for title */ font-size: 1.875rem; /* 30px for title */
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#featured-container { #featured-container {
@@ -79,26 +79,15 @@
#featured-container h2 { #featured-container h2 {
font-size: 1.875rem; font-size: 1.875rem;
text-align: center; text-align: center;
text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ text-shadow: var(--text-shadow-layered);
-0.5px -0.5px 1px #014038, /* Top-left base shadow */ color: var(--color-destin-sand);
-0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ background-color: var(--color-mid-green);
0.5px -0.5px 1px #014038, /* Top-right base shadow */ border: solid var(--color-destin-sand);
0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */
-0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */
-0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */
0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */
0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
color: #f7f7f7;
background-color: #96baa0;
border: solid #f7f7f7;
border-radius: 10px; border-radius: 10px;
margin-left: 30px; margin-left: 30px;
width: fit-content; width: fit-content;
padding: 0 20px; padding: 0 20px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
#featured-container ul { #featured-container ul {
@@ -109,31 +98,36 @@
padding: 0; padding: 0;
} }
#featured-images { #featured-list {
border: solid #96baa0; border: solid var(--color-mid-green);
border-radius: 10px; border-radius: 10px;
} }
#featured-images a { #featured-list a {
color: #014038; color: var(--color-dark-green);
background-color: #f7f7f7; background-color: var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
display: block; display: block;
text-align: center; text-align: center;
font-size: 1.4rem; font-size: 1.4rem;
color:#014038; color:var(--color-dark-green);
} }
#featured-images img { #featured-list {
min-width: 710px;
background-color: var(--color-destin-sand);
}
#featured-list img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#featured-images { #featured-list {
overflow: hidden; /* Hide anything outside the container */ overflow: hidden; /* Hide anything outside the container */
/*text-align: center; /*text-align: center;
width: 100%; */ width: 100%; */
@@ -144,79 +138,96 @@ figcaption {
font-size: 1.2rem; font-size: 1.2rem;
} }
#featured-images img { #featured-list img {
display: none; /* Hide all items initially */
max-width: 100%; /* Ensure images are responsive */ max-width: 100%; /* Ensure images are responsive */
height: auto; /* Maintain aspect ratio */ height: auto; /* Maintain aspect ratio */
background-color: #96baa0; background-color: var(--color-mid-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
} }
#testimonials-feature{ h3.product-name {
background-color: #96baa0; font-size: 1.6rem;
color: #014038; margin-bottom: 5px;
border: solid #014038; padding-bottom: 0;
}
p.short-description {
font-size: 1.1rem;
}
#featured-container a {
text-decoration: none;
}
/* --- TESTIMONIALS --- */
#testimonials-container{
background-color: var(--color-mid-green);
color: var(--color-dark-green);
border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
margin-top: 10px; margin-top: 10px;
white-space: normal; white-space: normal;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#testimonials-feature h2 { #testimonials-container h2 {
font-size: 1.675rem; font-size: 1.675rem;
text-align: center; text-align: center;
} }
.testimonial { .testimonial-item {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
white-space: normal; white-space: normal;
max-height: 175px; max-height: 175px;
max-width: 400px; max-width: 400px;
min-height: 175px; min-height: 175px;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
text-align: center; text-align: center;
} }
#right-aside {
/* --- CATEGORY NAVIGATION --- */
#category-nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #f0c06d; background-color: var(--color-soft-gold);
padding: 5px 10px; padding: 5px 10px;
margin-top: 10px; margin-top: 10px;
margin-left: 20px; border: solid var(--color-destin-sand);
border: solid #f7f7f7;
border-radius: 10px; border-radius: 10px;
} }
#category-nav-container { #category-nav-container {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
margin-top: 5px; margin-top: 5px;
text-align: center; text-align: center;
width: 90%; width: 90%;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
#right-aside h2 { #category-nav h2 {
font-size: 1.675rem; font-size: 1.675rem;
background-color: #bdd4da; background-color: var(--color-light-teal);
color: #014038; color: var(--color-dark-green);
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
padding: 0 5px; padding: 0 5px;
white-space: nowrap; white-space: nowrap;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
.categories ul { .categories ul {
@@ -228,17 +239,17 @@ figcaption {
} }
.categories ul li { .categories ul li {
border: solid #014038; border: solid var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
background-color: #96baa0; background-color: var(--color-mid-green);
margin-top: 20px; margin-top: 20px;
min-width: 100%; min-width: 100%;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-strong);
} }
.categories a { .categories a {
color: #014038; color: var(--color-dark-green);
font-size: 1.3rem; font-size: 1.3rem;
font-weight: bold; font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
@@ -246,9 +257,9 @@ figcaption {
} }
.categories ul li:hover { .categories ul li:hover {
background-color: #f7f7f7; background-color: var(--color-destin-sand);
color: #014038; color: var(--color-dark-green);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-medium);
} }
.categories ul li a:hover { .categories ul li a:hover {

36
src/styles/variables.css
View File

@@ -0,0 +1,36 @@
:root {
/* Colors */
--color-destin-sand: #f7f7f7;
--color-dark-green: #014038;
--color-mid-green: #96baa0;
--color-pale-green: #cadcd0;
--color-light-teal: #bdd4da;
--color-soft-golden: #f0c06d;
/* Box Shadows */
--shadow-subtle: 1px 2px 4px rgba(0, 0, 0, 0.3);
--shadow-medium: 1px 2px 4px rgba(0, 0, 0, 0.5);
--shadow-strong: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
/* Text Outline */
--text-outline-heading:
0.5px 0.5px 1px var(--color-dark-green),
-0.5px -0.5px 1px var(--color-dark-green),
-0.5px 0.5px 1px var(--color-dark-green),
0.5px -0.5px 1px var(--color-dark-green);
/* Layered Text Shadow */
--text-shadow-layered:
0.5px 0.5px 1px var(--color-dark-green),
-0.5px -0.5px 1px var(--color-dark-green),
-0.5px 0.5px 1px var(--color-dark-green),
0.5px -0.5px 1px var(--color-dark-green),
0.5px 0.5px .5px var(--color-light-teal),
-0.5px -0.5px .5px var(--color-light-teal),
-0.5px 0.5px .5px var(--color-light-teal),
0.5px -0.5px .5px var(--color-light-teal),
0.5px 0.5px .5px var(--color-destin-sand),
-0.5px -0.5px .5px var(--color-destin-sand),
-0.5px 0.5px .5px var(--color-destin-sand),
0.5px -0.5px .5px var(--color-destin-sand);
}