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

refactor: Adjust HTML/CSS across content pages for a more cohesive UX

Browse Source
This commit is contained in:
Derek L. Seitz
2025-09-10 12:52:53 -05:00
parent 3bf8446c61
commit 2805c14e56
21 changed files with 485 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/_data/testimonials.js
View File

@@ -21,7 +21,7 @@ const TESTIMONIALS = [
{ {
"id": "T02", "id": "T02",
"clientName": "Morris F.", "clientName": "Morris F.",
"testimonial": "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!", "testimonial": "Thanks to BVN's Workshops and amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
"dateObtained": "2024-12-03" "dateObtained": "2024-12-03"
}, },
{ {

11
src/_includes/base.njk
View File

@@ -10,6 +10,11 @@
<title>{{title}}</title> <title>{{title}}</title>
<link rel="stylesheet" href="/styles/variables.css">
<link rel="stylesheet" href="/styles/base.css">
<link rel="stylesheet" href="/styles/header.css">
<link rel="stylesheet" href="/styles/footer.css">
<link rel="stylesheet" href="/styles/modals.css">
{% if stylesheet %} {% if stylesheet %}
{% for style in stylesheet %} {% for style in stylesheet %}
<link rel="stylesheet" href="{{ style }}"> <link rel="stylesheet" href="{{ style }}">
@@ -19,7 +24,6 @@
{% if hCAPTCHA %} {% if hCAPTCHA %}
<script src="{{ hCAPTCHA }}" async defer></script> <script src="{{ hCAPTCHA }}" async defer></script>
{% endif %} {% endif %}
{% if fontAwesome %} {% if fontAwesome %}
<script src="{{ fontAwesome }}" crossorigin="anonymous"></script> <script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
{% endif %} {% endif %}
@@ -30,7 +34,7 @@
{% include "header.njk" %} {% include "header.njk" %}
<main> <main class="main-content-container">
{{ content | safe }} {{ content | safe }}
@@ -40,11 +44,14 @@
{% include "modals.njk" %} {% include "modals.njk" %}
<script src="/scripts/demo-modal.js"></script>
{% if pageScripts %} {% if pageScripts %}
{% for script in pageScripts %} {% for script in pageScripts %}
<script src="{{ script }}"></script> <script src="{{ script }}"></script>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<script src="/scripts/cart.js"></script>
<script src="/scripts/newsletter.js">
</body> </body>
</html> </html>

3
src/_includes/category-nav.njk
View File

@@ -1,7 +1,8 @@
<div id="right-side"> <div id="right-side">
<nav id="category-nav"> <nav id="category-nav">
<div id="category-nav-container"> <div id="category-nav-container">
<h2>Shop by Category</h2> <h2>Categories</h2>
<hr>
<div class="categories"> <div class="categories">
<ul> <ul>
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li> <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>

75
src/_includes/header.njk
View File

@@ -1,44 +1,37 @@
<header role="banner"> <header role="banner">
<div class="header-container"> <div class="header-container">
<div class="header-left"> <div class="logo-name-cart">
<div class="logo"> <div class="logo-box">
<img <img class="logo" src="/images/Client1_LogoPalette2_F0C06D.png"
src="/images/Client1_LogoPalette2_F0C06D.png" alt="Bloom Valley Nursery Logo">
alt="Bloom Valley Nursery Logo"> </div>
</div> <div class="name-box">
</div> <p class="business-name">Bloom Valley Nursery</p>
</div>
<div class="cart-box">
<button id="shopping-cart" aria-label="Shopping Cart">
<i class="fa-solid fa-cart-shopping fa-2xl"></i>
</button>
</div>
</div>
<div class="header-center"> <div class="nav-container">
<div class="business-name-container"> <nav role="navigation" aria-label="Main Navigation">
<p class="business-name">Bloom Valley Nursery</p> <ul>
</div> <li>
<div class="nav-container"> <a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a>
<nav role="navigation" aria-label="Main Navigation"> </li>
<ul> <li>
<li> <a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a>
<a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a> </li>
</li> <li>
<li> <a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a>
<a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a> </li>
</li> <li>
<li> <a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a>
<a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a> </li>
</li> </ul>
<li> </nav>
<a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a> </div>
</li> </div>
</ul>
</nav>
</div>
</div>
<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 fa-2xl"></i>
</button>
</div>
</div>
</header> </header>

10
src/community.njk
View File

@@ -4,18 +4,11 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
seoIndexing: false seoIndexing: false
title: "Community Events - Bloom Valley Nursery Demo" title: "Community Events - Bloom Valley Nursery Demo"
stylesheet: stylesheet:
- "/styles/variables.css"
- "/styles/base.css"
- "/styles/header.css"
- "/styles/community.css" - "/styles/community.css"
- "/styles/footer.css"
- "/styles/modals.css"
fontAwesome: "https://kit.fontawesome.com/c42448086d.js" fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
currentPage: "community" currentPage: "community"
pageScripts: pageScripts:
- "/scripts/events-carousel.js" - "/scripts/events-carousel.js"
- "/scripts/cart.js"
- "/scripts/newsletter.js"
--- ---
<div class="community"> <div class="community">
<h1>Mark Your Calendars!</h1> <h1>Mark Your Calendars!</h1>
@@ -24,6 +17,7 @@ pageScripts:
<div class="upcoming-events"> <div class="upcoming-events">
<h2>Upcoming Events</h2> <h2>Upcoming Events</h2>
<p class="notice">Check out the Upcoming Events at Bloom Valley Nursery and around the community!<br> Our BVN Workshops are for all ages and free of charge. We ask that you use our <a class="com-link" href="../about/#feedback" target="_blank" rel="noopener noreferrer">contact form here</a> to sign up for BVN Workshops in advance. Reservations are not required, though, and we will make space for all who attend.</p>
<div id="events-navigation"> <div id="events-navigation">
<ul class="event-categories"> <ul class="event-categories">
<li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li> <li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li>
@@ -70,7 +64,7 @@ pageScripts:
<div class="add-events"> <div class="add-events">
<p> <p>
For more details, to add events to this page, or to leave feedback, For more details, to add events to this page, or to leave feedback,
<a <a class="com-link"
href="/about/#feedback" href="/about/#feedback"
aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries." aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
>click here</a >click here</a

71
src/credits.njk
View File

@@ -4,47 +4,54 @@ metaDesc: "Credit & attribution for the contributors of this demo eCommerce webs
seoIndexing: true seoIndexing: true
title: "Credits & Attribution - Bloom Valley Nursery Demo" title: "Credits & Attribution - Bloom Valley Nursery Demo"
stylesheet: stylesheet:
- "/styles/variables.css"
- "/styles/base.css"
- "/styles/header.css"
- "/styles/credits.css" - "/styles/credits.css"
- "/styles/footer.css"
- "/styles/modals.css"
fontAwesome: "https://kit.fontawesome.com/c42448086d.js" fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
isLandingPage: false isLandingPage: false
pageScripts: pageScripts:
- "/scripts/tooltips.js" - "/scripts/tooltips.js"
- "/scripts/script.js"
- "/scripts/cart.js"
- "/scripts/newsletter.js"
--- ---
<div class="credits-container"> <div class="credits-container">
<div class="intro"> <div class="content">
<h1>Credits & Attributions</h1> <div class="intro">
<p>A heartfelt <strong>Thank You</strong> is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.</p> <h1 class="cred-attr">Credits & Attributions</h1>
<p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p> <p class="thanks">A heartfelt <strong class="strong-thanks">Thank You</strong> is extended to these creators and the platforms that host their work.<br> Their royalty-free contributions to the public helped make this demo possible.</p>
<p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
<div> <div class="video-box">
<ul class="credits-list"> <h2 class="videos">Video Content</h2>
{% for credit in credits.CREDITS %} <ul class="videos-credits-list">
<li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}"> <li class="credit" data-tooltip="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">
<div class="thumb"> <div class="meta">
<img class="thumb-inline" <p>
src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}" <a href="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">The Story of Bloom Valley</a> was created by <a class="creator" href="https://dlseitz.dev" target="_blank" rel="noopener noreferrer">Derek L. Seitz</a> with <a class="source" href="https://pictory.ai/" target="_blank" rel="noopener noreferrer">Pictory.AI</a> under the <a class="license" href="https://pictory.ai/terms-of-service#:~:text=(c).%20Third%2DParty,new%20Pictoried%20Content." target="_blank" rel="noopener noreferrer">Pictory.AI Terms of Service</a>.
alt="Attributed image for {{ credit.fileName }}" </p>
width="40" height="24" </div>
loading="lazy" decoding="async"> </li>
</div> </ul>
</div>
<div class="images-box">
<h2 class="images">Image Content</h2>
<ul class="images-credits-list">
{% for credit in credits.CREDITS %}
<li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
<div class="thumb">
<img class="thumb-inline"
src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}"
alt="Attributed image for {{ credit.fileName }}"
width="40" height="24"
loading="lazy" decoding="async">
</div>
<div class="meta" > <div class="meta">
<p> <p>
Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank" Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank"
rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a> . rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a> .
</p> </p>
</div> </div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
</div> </div>
</div> </div>

64
src/gallery.njk
View File

@@ -4,49 +4,43 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
seoIndexing: false seoIndexing: false
title: "Gallery - Bloom Valley Nursery Demo" title: "Gallery - Bloom Valley Nursery Demo"
stylesheet: stylesheet:
- "/styles/variables.css"
- "/styles/base.css"
- "/styles/header.css"
- "/styles/gallery.css" - "/styles/gallery.css"
- "/styles/category-nav.css" - "/styles/category-nav.css"
- "/styles/footer.css"
- "/styles/modals.css"
fontAwesome: "https://kit.fontawesome.com/c42448086d.js" fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
currentPage: "gallery" currentPage: "gallery"
pageScripts: pageScripts:
- "/scripts/gallery-carousel.js" - "/scripts/gallery-carousel.js"
- "/scripts/script.js"
- "/scripts/cart.js"
- "/scripts/newsletter.js"
--- ---
<div id="gallery-top"> <div id="gallery-top">
<section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category."> <div class="left-side">
<h2>Products by Category</h2> <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
<div id="product-category-card"> <h2>Products by Category</h2>
<button <div id="product-category-card">
id="scroll-left" <button
aria-label="Scroll products left" id="scroll-left"
aria-controls="product-carousel" aria-label="Scroll products left"
class="fa-solid fa-chevron-left" aria-controls="product-carousel"
> class="fa-solid fa-chevron-left"
</button> >
<div id="product-carousel"> </button>
<div id="product-list"><!--Product Cards will be dynamically inserted here--></div> <div id="product-carousel">
<div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
</div>
<button
id="scroll-right"
aria-label="Scroll products right"
aria-controls="product-carousel"
class="fa-solid fa-chevron-right"
>
</button>
</div> </div>
<button <div id="gallery-bottom">
id="scroll-right" <button id="cart-details">View Shopping Cart</button>
aria-label="Scroll products right" </div>
aria-controls="product-carousel" </section>
class="fa-solid fa-chevron-right" </div>
> <div class="right-side">
</button> {% include "category-nav.njk" %}
</div> </div>
<div id="gallery-bottom">
<button id="cart-details">View Shopping Cart</button>
</div>
</section>
{% include "category-nav.njk" %}
</div> </div>

11
src/index.njk
View File

@@ -4,19 +4,12 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
seoIndexing: false seoIndexing: false
title: "Landing - Bloom Valley Nursery Demo" title: "Landing - Bloom Valley Nursery Demo"
stylesheet: stylesheet:
- "/styles/variables.css"
- "/styles/base.css"
- "/styles/header.css"
- "/styles/index.css" - "/styles/index.css"
- "/styles/category-nav.css" - "/styles/category-nav.css"
- "/styles/footer.css"
- "/styles/modal.css"
fontAwesome: "https://kit.fontawesome.com/c42448086d.js" fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
currentPage: "index" currentPage: "index"
pageScripts: pageScripts:
- "/scripts/script.js" - "/scripts/script.js"
- "/scripts/cart.js"
- "/scripts/newsletter.js"
--- ---
<!-- Main Content Section --> <!-- Main Content Section -->
@@ -40,7 +33,7 @@ pageScripts:
<h2 id="testimonials-heading">What Others Say</h2> <h2 id="testimonials-heading">What Others Say</h2>
{% for item in testimonials.TESTIMONIALS %} {% for item in testimonials.TESTIMONIALS %}
<div id="{{ id }}" class="testimonial-item"> <div id="{{ id }}" class="testimonial-item">
<h3 class="client-name">{{ item.clientName }} said<h3> <h3 class="client-name">{{ item.clientName }} said</h3>
<p class="client-quote">"{{ item.testimonial }}"</p> <p class="client-quote">"{{ item.testimonial }}"</p>
</div> </div>
{% endfor %} {% endfor %}
@@ -58,7 +51,7 @@ pageScripts:
<a href="/gallery/"> <a href="/gallery/">
<h3 class="product-name">{{ item.productName }}</h3> <h3 class="product-name">{{ item.productName }}</h3>
<figure> <figure>
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item"> <img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" width="480" height="320" class="featured-item">
<figcaption class="short-description">{{ item.shortDescription }}</figcaption> <figcaption class="short-description">{{ item.shortDescription }}</figcaption>
</figure> </figure>
<p class="price">${{ item.price }}</p> <p class="price">${{ item.price }}</p>

54
src/scripts/demo-modal.js Normal file
View File

@@ -0,0 +1,54 @@
document.addEventListener("DOMContentLoaded", () => {
// ================== DEMO NOTICE MODAL ==================
if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
let modal = document.createElement("div");
modal.id = "demoModal";
modal.style.position = "fixed";
modal.style.left = "0";
modal.style.top = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.background = "rgba(0, 0, 0, 0.7)";
modal.style.display = "flex";
modal.style.alignItems = "center";
modal.style.justifyContent = "center";
modal.style.zIndex = "1000";
let modalContent = document.createElement("div");
modalContent.style.background = "white";
modalContent.style.padding = "20px";
modalContent.style.borderRadius = "10px";
modalContent.style.textAlign = "center";
modalContent.style.width = "80%";
modalContent.style.maxWidth = "400px";
let heading = document.createElement("h2");
heading.innerText = "Demo Notice";
let message = document.createElement("p");
message.innerText =
"This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
let closeButton = document.createElement("button");
closeButton.innerText = "I Understand";
closeButton.style.padding = "10px 20px";
closeButton.style.marginTop = "15px";
closeButton.style.border = "none";
closeButton.style.background = "#007bff";
closeButton.style.color = "white";
closeButton.style.fontSize = "16px";
closeButton.style.cursor = "pointer";
closeButton.style.borderRadius = "5px";
closeButton.addEventListener("click", function () {
modal.style.display = "none";
sessionStorage.setItem("demoNoticeAcknowledged", "true");
});
modalContent.appendChild(heading);
modalContent.appendChild(message);
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
}
});

14
src/scripts/gallery-carousel.js
View File

@@ -71,6 +71,20 @@ const updateProductList = (category) => {
const productList = document.getElementById("product-list"); const productList = document.getElementById("product-list");
if (!productList) return console.error("Element with ID 'product-list' not found."); if (!productList) return console.error("Element with ID 'product-list' not found.");
// Remove active class from all buttons
document.querySelectorAll(".categories ul li").forEach(li => {
li.classList.remove('active');
});
// Add active class to the button for the current category
document.querySelectorAll(".cat-btn").forEach(button => {
const url = new URL(button.href);
const btnCategory = url.searchParams.get('category');
if (btnCategory === category) {
button.parentElement.classList.add('active');
}
});
selectedProducts = allProducts.filter(product => product.category === category); selectedProducts = allProducts.filter(product => product.category === category);
currentIndex = 0; currentIndex = 0;

69
src/scripts/script.js
View File

@@ -1,58 +1,6 @@
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// ================== DEMO NOTICE MODAL ==================
if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
let modal = document.createElement("div");
modal.id = "demoModal";
modal.style.position = "fixed";
modal.style.left = "0";
modal.style.top = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.background = "rgba(0, 0, 0, 0.7)";
modal.style.display = "flex";
modal.style.alignItems = "center";
modal.style.justifyContent = "center";
modal.style.zIndex = "1000";
let modalContent = document.createElement("div"); // ================== PROMOS CAROUSEL ==================
modalContent.style.background = "white";
modalContent.style.padding = "20px";
modalContent.style.borderRadius = "10px";
modalContent.style.textAlign = "center";
modalContent.style.width = "80%";
modalContent.style.maxWidth = "400px";
let heading = document.createElement("h2");
heading.innerText = "Demo Notice";
let message = document.createElement("p");
message.innerText =
"This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
let closeButton = document.createElement("button");
closeButton.innerText = "I Understand";
closeButton.style.padding = "10px 20px";
closeButton.style.marginTop = "15px";
closeButton.style.border = "none";
closeButton.style.background = "#007bff";
closeButton.style.color = "white";
closeButton.style.fontSize = "16px";
closeButton.style.cursor = "pointer";
closeButton.style.borderRadius = "5px";
closeButton.addEventListener("click", function () {
modal.style.display = "none";
sessionStorage.setItem("demoNoticeAcknowledged", "true");
});
modalContent.appendChild(heading);
modalContent.appendChild(message);
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
}
// ================== SHOPPER PROMO CAROUSEL ==================
const promo = document.querySelectorAll(".promo-item"); const promo = document.querySelectorAll(".promo-item");
let currentIndexPromo = 0; let currentIndexPromo = 0;
@@ -71,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
showNextPromo(); showNextPromo();
setInterval(showNextPromo, 2250); setInterval(showNextPromo, 2250);
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ================== // ================== TESTIMONIALS CAROUSEL ==================
const testimonials = document.querySelectorAll(".testimonial-item"); const testimonials = document.querySelectorAll(".testimonial-item");
let currentIndexTestimonials = 0; let currentIndexTestimonials = 0;
@@ -91,19 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
setInterval(showNextTestimonial, 3500); setInterval(showNextTestimonial, 3500);
// ================== FEATURED ITEMS CAROUSEL ================== // ================== FEATURED ITEMS CAROUSEL ==================
/*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
let currentIndex = 0;
function showNextItem() {
featuredItems[currentIndex].classList.remove("active");
currentIndex = (currentIndex + 1) % featuredItems.length;
featuredItems[currentIndex].classList.add("active");
}
featuredItems[currentIndex].classList.add("active");
setInterval(showNextItem, 3000);*/
// ================== UPDATED FEATURED ITEMS CAROUSEL ==================
const featuredItems = document.querySelectorAll(".featured-card"); const featuredItems = document.querySelectorAll(".featured-card");
let currentIndexFeatured = 0; let currentIndexFeatured = 0;

18
src/styles/about.css
View File

@@ -72,8 +72,10 @@ h2#bvn-story {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--color-destin-sand); background-color: var(--color-destin-sand);
border: solid 2px var(--color-mid-green); border: solid 3px var(--color-mid-green);
border-radius: 15px; border-radius: 15px;
box-shadow: var(--shadow-medium);
} }
@@ -86,14 +88,6 @@ h2#bvn-story {
padding: 0 50px; padding: 0 50px;
} }
#bottom {
display: flex;
flex-direction: row;
gap: 20px;
width: 100%
}
#bottom { #bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -107,7 +101,6 @@ h2#bvn-story {
padding: 20px; padding: 20px;
margin: 30px auto; margin: 30px auto;
box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium);
} }
#business-info { #business-info {
@@ -155,7 +148,10 @@ strong {
} }
#feedback h2 { #feedback h2 {
margin: auto; margin-top: 5px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
text-align: center; text-align: center;
background-color: var(--color-mid-green); background-color: var(--color-mid-green);
border: solid 2px var(--color-destin-sand); border: solid 2px var(--color-destin-sand);

47
src/styles/base.css
View File

@@ -1,4 +1,13 @@
/* Global Styles */ /* Global Styles */
/* Override Font Awesome font-face globally to prevent CLS */
@font-face {
font-family: "Font Awesome 6 Brands";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://ka-f.fontawesome.com/releases/v7.0.1/webfonts/free-fa-brands-400.woff2") format("woff2");
}
html { html {
font-size: 17px; /* Base font size for scaling */ font-size: 17px; /* Base font size for scaling */
scroll-behavior: smooth; scroll-behavior: smooth;
@@ -9,7 +18,7 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-family: 'Calibri', sans-serif; font-family: 'Calibri', sans-serif;
font-size: 1rem; /* Default font size based on 16px */ font-size: 1rem; /* Default font size based on 17px */
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -17,56 +26,53 @@ body {
} }
body h1 { body h1 {
text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */ text-shadow: var(--text-outline-light);
-0.5px -0.5px .5px var(--color-destin-sand), /* Top-left top shadow */
-0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-left top shadow */
0.5px -0.5px .5px var(--color-destin-sand); /* Top-right top shadow */
} }
/* Title Large (Arial Bold 30px) */ /* Title Large (Arial Bold ~32px) */
h1 { h1 {
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;
} }
/* Title (Arial Bold 25px) */ /* Title (Arial Bold ~27px) */
h2 { h2 {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1.5625rem; font-size: 1.5625rem;
} }
/* Subtitle (Comfortaa Normal 15px) */ /* Subtitle (Comfortaa Normal ~16px) */
h3 { h3 {
font-family: 'Comfortaa', sans-serif; font-family: 'Comfortaa', sans-serif;
font-size: .9375rem ; /* 15px for subtitle */ font-size: .9375rem ;
} }
/* Body Large (Calibri Normal 20px) */ /* Body Large (Calibri Normal ~21px) */
p.body-large { p.body-large {
font-family: 'Calibri', sans-serif; font-family: 'Calibri', sans-serif;
font-size: 1.25rem; /* 20px for body large */ font-size: 1.25rem;
} }
/* Body Strong (Calibri Bold 16px) */ /* Body Strong (Calibri Bold 17px) */
strong { strong {
font-family: 'Calibri', sans-serif; font-family: 'Calibri', sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1rem; /* 16px for body strong */ font-size: 1rem;
} }
/* Body (Calibri Normal 16px) */ /* Body (Calibri Normal 17px) */
p.body { p.body {
font-family: 'Calibri', sans-serif; font-family: 'Calibri', sans-serif;
font-size: 1rem; /* 16px for regular body text */ font-size: 1rem;
} }
/* Captions (Arial Bold 11px) */ /* Captions (Arial Bold ~12px) */
figcaption { figcaption {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-weight: bold; font-weight: bold;
font-size: .6875rem; /* 11px for captions */ font-size: .6875rem;
} }
@media (max-width: 780px) { @media (max-width: 780px) {
@@ -75,10 +81,11 @@ figcaption {
} }
} }
main { .main-content-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
max-width: 1440px;
padding: 20px; padding: 20px;
} }

8
src/styles/category-nav.css
View File

@@ -13,7 +13,7 @@
padding: 5px 10px; padding: 5px 10px;
margin-top: 10px; margin-top: 10px;
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
max-width: 325px; max-width: 225px;
border: solid var(--color-destin-sand); border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
} }
@@ -79,3 +79,9 @@
box-shadow: none; box-shadow: none;
color: inherit; color: inherit;
} }
.categories ul li.active {
background-color: var(--color-destin-sand);
color: var(--color-dark-green);
box-shadow: var(--shadow-medium);
}

40
src/styles/community.css
View File

@@ -15,17 +15,47 @@ h1 {
border: solid var(--color-mid-green); border: solid var(--color-mid-green);
border-radius: 15px; border-radius: 15px;
color: var(--color-dark-green); color: var(--color-dark-green);
text-decoration: underline;
text-shadow: var(--text-outline-heading); text-shadow: var(--text-outline-heading);
padding: 5px 100px; padding: 5px 100px;
box-shadow: var(--shadow-subtle); box-shadow: var(--shadow-subtle);
} }
.notice, .com-link {
font-size: 1.3rem;
color: var(--color-dark-green);
}
.com-link {
text-decoration: none;
font-weight: 600;
}
.com-link:hover {
color: var(--color-soft-golden);
}
#calendar-events-container { #calendar-events-container {
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 20px; text-align: center;
justify-content: center;
border: none; border: none;
background-color: var(--color-soft-golden);
border: solid 3px var(--color-destin-sand);
border-radius: 15px;
padding: 10px;
box-shadow: var(--shadow-medium);
}
.events {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 10px;
} }
.upcoming-events { .upcoming-events {
@@ -196,7 +226,7 @@ li.enav {
border: solid var(--color-destin-sand); border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
margin-top: 20px; margin-top: 20px;
margin-botom: 0; margin-bottom: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: fit-content; width: fit-content;
@@ -210,7 +240,7 @@ li.enav {
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: var(--color-pale-green); background-color: var(--color-pale-green);
border: solid var(--color-dark-green); border: solid var(--color-destin-sand);
border-radius: 15px; border-radius: 15px;
padding: 0px 20px 10px 20px; padding: 0px 20px 10px 20px;
width: 95%; width: 95%;
@@ -228,6 +258,8 @@ li.enav {
border: solid 0.5px var(--color-dark-green); border: solid 0.5px var(--color-dark-green);
border-radius: 10px; border-radius: 10px;
padding: 2px 20px; padding: 2px 20px;
box-shadow: var(--shadow-subtle);
} }
.event-card h3.workshop { .event-card h3.workshop {

89
src/styles/credits.css
View File

@@ -1,6 +1,80 @@
/* CSS Style Rules for "Credits & Attributions" */ /* CSS Style Rules for "Credits & Attributions" */
.credits-container { .credits-container {
display: flex; display: flex;
font-size: 1.2rem;
background-color: var(--color-soft-golden);
border: solid 3px var(--color-destin-sand);
border-radius: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
padding: 10px;
width: auto;
}
.credits-container a {
text-decoration: none;
color: var(--color-dark-green);
font-weight: 600;
}
.content {
display: flex;
flex-direction: column;
background-color: var(--color-pale-green);
border: solid 3px var(--color-destin-sand);
border-radius: 15px;
margin: 20px;
padding: 20px;
gap: 20px;
}
.cred-attr {
font-size: 2.25rem;
background-color: var(--color-mid-green);
color: var(--color-destin-sand);
border: solid var(--color-destin-sand);
border-radius: 15px;
padding: 0 100px;
margin-top: 20px;
margin-bottom: 20px;
width: fit-content;
text-align: center;
text-shadow: var(--text-outline-heading);
box-shadow: var(--shadow-medium);
align-self: center;
}
.video-box, .images-box {
display: flex;
flex-direction: column;
background-color: var(--color-destin-sand);
border: solid 3px var(--color-mid-green);
border-radius: 15px;
}
.video-box {
margin-bottom: 30px;
}
.videos, .images {
font-size: 1.85rem;
background-color: var(--color-light-teal);
color: var(--color-dark-green);
border: solid var(--color-destin-sand);
border-radius: 15px;
padding: 0 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
width: fit-content;
text-align: center;
text-shadow: var(--text-outline-light);
box-shadow: var(--shadow-medium);
align-self: center;
} }
.intro { .intro {
@@ -10,13 +84,22 @@
text-align: center; text-align: center;
} }
.thanks {
font-size: 1.3rem;
}
.strong-thanks {
font-size: 1.5rem;
}
#tip-desc { #tip-desc {
display: none; display: none;
} }
.credits-list { .videos-credits-list,
.images-credits-list {
list-style: none; list-style: none;
margin: 0; margin: 0 30px;
padding: 0; padding: 0;
} }
@@ -25,6 +108,7 @@
align-items: flex-start; align-items: flex-start;
gap: 0.5rem; /* spacing between thumb and text */ gap: 0.5rem; /* spacing between thumb and text */
margin-bottom: 1rem; margin-bottom: 1rem;
margin: auto;
} }
.thumb { .thumb {
@@ -65,3 +149,4 @@
box-shadow: 0 4px 8px rgba(0,0,0,0.15); box-shadow: 0 4px 8px rgba(0,0,0,0.15);
z-index: 9999; z-index: 9999;
} }

15
src/styles/footer.css
View File

@@ -5,6 +5,7 @@
} }
#footer-nav { #footer-nav {
padding: 0; padding: 0;
margin-top: 10px;
} }
nav ul, #footer-nav ul { nav ul, #footer-nav ul {
@@ -19,7 +20,6 @@ nav ul, #footer-nav ul {
position: relative; position: relative;
list-style-type: none; list-style-type: none;
flex-direction: row; flex-direction: row;
margin-top: 20px;
background-color: var(--color-destin-sand); background-color: var(--color-destin-sand);
border-radius: 5px; border-radius: 5px;
width: fit-content; width: fit-content;
@@ -145,4 +145,17 @@ footer div label {
#copyright { #copyright {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.1rem;
color: var(--color-dark-green);
}
#copyright a {
color: var(--color-dark-green);
font-weight: 600;
font-size: 1.1rem;
text-decoration: one;
}
#copyright a:hover {
color: var(--color-destin-white);
} }

39
src/styles/gallery.css
View File

@@ -8,15 +8,23 @@
#gallery-top { #gallery-top {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: top;
gap: 10px;
margin-bottom: 50px;
}
.left-side {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
width: 95vw;
gap: 20px;
} }
#product-carousel-feature { #product-carousel-feature {
align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
} }
#product-carousel-feature h2 { #product-carousel-feature h2 {
@@ -29,7 +37,6 @@
border: solid var(--color-destin-sand); border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 10px;
padding-left: 20px; padding-left: 20px;
transform: translateX(30px);
box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium);
} }
@@ -38,27 +45,26 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-align: center; text-align: center;
width: 65vw; width: 60vw;
} }
#product-carousel { #product-carousel {
display: flex; display: flex;
flex-direction: row; /* Flexbox layout for horizontal row */ flex-direction: row; /* Flexbox layout for horizontal row */
gap: 20px; /* Space between product cards */ gap: 10px; /* Space between product cards */
overflow-x: hidden; /* Changed from 'auto' to 'hidden' */ overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
scroll-behavior: smooth; /* Smooth scrolling for buttons */ scroll-behavior: smooth; /* Smooth scrolling for buttons */
padding: 10px; /* Optional padding inside the carousel */ padding: 10px; /* Optional padding inside the carousel */
white-space: nowrap; /* Prevent wrapping to a new row */ white-space: nowrap; /* Prevent wrapping to a new row */
transform: translateX(4vw); min-height: 550px;
min-height: 600px;
align-items: center; align-items: center;
} }
.product-card { .product-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 300px; width: 250px;
min-width: 300px; min-width: 250px;
max-height: 350px; max-height: 350px;
flex: 0 0 auto; /* Prevent resizing of cards */ flex: 0 0 auto; /* Prevent resizing of cards */
border: 1px solid var(--color-dark-green); border: 1px solid var(--color-dark-green);
@@ -67,6 +73,7 @@
margin-left: 20px; margin-left: 20px;
align-items: center; align-items: center;
text-align: center; text-align: center;
white-space: normal;
background-color: var(--color-destin-sand); background-color: var(--color-destin-sand);
box-shadow: var(--shadow-subtle); box-shadow: var(--shadow-subtle);
transition: all 0.5s ease-in-out; /* Added for smooth transitions */ transition: all 0.5s ease-in-out; /* Added for smooth transitions */
@@ -93,10 +100,9 @@
align-items: center; align-items: center;
} }
/* New style for the centered card */
.product-card.is-centered { .product-card.is-centered {
width: 340px; width: 340px;
transform: scale(1.4); transform: scale(1.2);
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
background-color: var(--color-destin-sand); background-color: var(--color-destin-sand);
white-space: normal; white-space: normal;
@@ -105,12 +111,11 @@
#scroll-left, #scroll-right { #scroll-left, #scroll-right {
cursor: pointer; cursor: pointer;
background-color: var(--color-dark-green); background-color: var(--color-dark-green);
color: white; color: var(--color-destin-sand);
border: none; border: none;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
font-size: 1.5rem; font-size: 1.5rem;
transform: translateX(4.5vw);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -163,4 +168,8 @@
color: var(--color-destin-sand); color: var(--color-destin-sand);
box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium);
} }
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
.right-side {
margin-left: 48px;
margin-top: 52px;
}

254
src/styles/header.css
View File

@@ -1,79 +1,70 @@
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */ /* |--↓-↓-↓ Start Header ↓-↓-↓--| */
header { header {
padding: 20px; padding-top: 20px;
background-color: var(--color-light-teal); background-color: var(--color-light-teal);
border-bottom: 3px solid var(--color-mid-green);
width: 100%; width: 100%;
} }
.header-container { .header-container {
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
max-width: 1400px; max-width: 1440px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
width: 100%; width: 100%;
gap: 20px; /* Adds space between columns */ gap: 20px;
} }
/* Left column - Logo */ .logo-name-cart {
.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; display: flex;
flex-direction: column; flex-direction: row;
justify-content: center;
align-items: center; align-items: center;
gap: 30px;
} }
/* Right column - Shopping cart */ .logo-box {
.header-right {
flex: 0 0 150px; /* Fixed width for shopping cart */
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
position: relative;
z-index: 1;
} }
/* Logo styles */ img.logo {
header .logo {
width: 100%;
max-width: 180px;
height: auto;
}
header .logo img {
display: block; display: block;
width: 100%; width: 180px;
height: auto; height: 180px;
margin-left: 50px;
filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green)); filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
} }
/* Business name and navigation container */ .name-box {
.business-name-container { display: flex;
width: 100%; align-items: center;
justify-content: center;
max-width: 700px;
}
.business-name {
font-family: 'Georgia', serif;
display: block;
font-size: 4rem;
color: var(--color-dark-green);
margin: 10px 0;
text-align: center; text-align: center;
margin-bottom: 15px; text-shadow: var(--text-outline-business);
} }
.nav-container { .cart-box {
width: 100%; display: flex;
justify-content: flex-end;
z-index: 1;
align-self: flex-end;
} }
/* Shopping cart button */
#shopping-cart { #shopping-cart {
position: static; position: block;
padding: 15px; padding: 15px;
margin-left: 75px;
border-radius: 10px; border-radius: 10px;
background-color: var(--color-destin-sand); background-color: var(--color-destin-sand);
color: var(--color-dark-green); color: var(--color-dark-green);
@@ -82,149 +73,8 @@ header .logo img {
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
border: none; border: none;
display: flex; width: 60px;
justify-content: center; height: 55px;
align-items: center;
}
.business-name {
font-family: 'Georgia', serif;
display: block;
font-size: 3.6rem;
color: var(--color-dark-green); /* Dark green for the title */
margin: 10px 0;
text-align: center;
text-shadow: var(--text-outline-business);
}
header p.tagline {
font-family: 'Arial', sans-serif;
font-size: 1.4rem;
color: var(--color-mid-green); /* Pale green for the tagline */
margin: 0;
text-align: center;
}
.menu-toggle {
display: none;
}
@media (max-width: 780px) {
/* --- Main Header Container --- */
header {
flex-direction: column;
padding: 10px;
}
.header-main {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo-and-title {
display: flex;
align-items: center;
gap: 15px;
}
/* --- Logo --- */
header .logo {
position: static;
width: 100px; /* Smaller logo for compact header */
}
header .logo img {
width: 100%;
}
/* --- Business Name --- */
.business-name {
font-size: 1.8rem; /* Smaller name for mobile */
margin: 0;
}
/* --- Header Icons --- */
.header-icons {
display: flex;
align-items: center;
gap: 15px;
}
#shopping-cart {
position: static;
padding: 0;
background: none;
box-shadow: none;
font-size: 1.5rem;
}
.menu-toggle {
display: block;
background: none;
border: none;
color: var(--color-dark-green);
cursor: pointer;
}
/* --- Compact Navigation Menu --- */
nav {
display: none;
width: 100%;
margin-top: 10px;
background-color: var(--color-destin-sand);
border-radius: 5px;
box-shadow: var(--shadow-subtle);
}
nav.is-open {
display: block;
}
nav ul {
flex-direction: column;
padding: 5px 0; /* Reduced vertical padding */
}
nav ul li a {
padding: 10px 0; /* Reduced padding for each link */
font-size: 1rem; /* Smaller font size for links */
text-align: center;
border: none;
}
nav ul li a.current-page {
background: none;
text-decoration: underline;
}
}
nav {
margin-top: 20px;
background-color: var(--color-destin-sand);
padding: 10px 20px;
border-radius: 5px;
width: 100%;
box-shadow: var(--shadow-subtle);
}
#shopping-cart {
position: absolute;
top: 100px;
right: 100px;
padding: 20px;
border-radius: 10px;
background-color: var(--color-destin-sand);
color: var(--color-dark-green);
cursor: pointer;
z-index: 5;
transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: var(--shadow-strong);
border: none;
display: flex;
justify-content: center;
align-items: center;
} }
#shopping-cart:hover { #shopping-cart:hover {
@@ -234,16 +84,38 @@ nav {
box-shadow: var(--shadow-medium); box-shadow: var(--shadow-medium);
} }
.nav-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
border-bottom: solid var(--color-dark-green);
}
nav {
display: flex;
flex-direction: row;
background-color: var(--color-destin-sand);
padding: 2px 50px;
border-radius: 5px;
width: 100%;
box-shadow: var(--shadow-subtle);
}
nav ul { nav ul {
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
}
nav ul {
gap: 40px; gap: 40px;
} }
nav ul li { nav ul li {
@@ -264,7 +136,7 @@ nav ul li {
} }
.community-link { .community-link {
font-size: 0.9em; font-size: 1.2rem;
} }
nav ul li a { nav ul li a {

31
src/styles/index.css
View File

@@ -2,8 +2,8 @@
.main-content-container { .main-content-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-start;
gap: 50px; gap: 35px;
} }
.promo-item, .promo-item,
@@ -15,14 +15,21 @@
.promo-item.visible, .promo-item.visible,
.testimonial-item.visible, .testimonial-item.visible,
.featured-item.active { .featured-item.active {
display: block; /* Show visible or active items */ display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* Show visible or active items */
}
.testimonial-item:active {
} }
#left-side, #left-side,
#category-nav { #category-nav {
flex: 1; flex: 1;
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
max-width: 325px; max-width: 300px;
} }
#left-side { #left-side {
@@ -60,8 +67,8 @@
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 10px;
white-space: normal; white-space: normal;
max-height: 200px; max-height: 250px;
min-height: 200px; min-height: 250px;
max-width: 350px; max-width: 350px;
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
text-align: center; text-align: center;
@@ -93,19 +100,23 @@
} }
.testimonial-item { .testimonial-item {
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--color-destin-sand); background-color: var(--color-destin-sand);
color: var(--color-dark-green); color: var(--color-dark-green);
border: solid var(--color-dark-green); 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: 200px; max-height: 275px;
max-width: 350px; max-width: 350px;
min-height: 200px; min-height: 275px;
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
text-align: center; text-align: center;
} }
/* FEATURED ITEMS */ /* FEATURED ITEMS */
#featured-container { #featured-container {
display: flex; display: flex;
@@ -125,7 +136,7 @@
color: var(--color-destin-sand); color: var(--color-destin-sand);
background-color: var(--color-mid-green); background-color: var(--color-mid-green);
border: solid var(--color-destin-sand); border: solid var(--color-destin-sand);
border-radius: 10px; border-radius: 15px;
width: fit-content; width: fit-content;
padding: 0 50px; padding: 0 50px;
margin: 0px; margin: 0px;
@@ -170,6 +181,8 @@
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: var(--shadow-strong); box-shadow: var(--shadow-strong);
width: 480px;
height: 320px;
} }
#featured-list { #featured-list {

6
src/styles/variables.css
View File

@@ -25,6 +25,12 @@
-0.5px 0.5px 1px var(--color-destin-sand), -0.5px 0.5px 1px var(--color-destin-sand),
0.5px -0.5px 1px var(--color-destin-sand); 0.5px -0.5px 1px var(--color-destin-sand);
--text-outline-light:
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);
/* Layered Text Shadow */ /* Layered Text Shadow */
--text-shadow-layered: --text-shadow-layered:
0.5px 0.5px 1px var(--color-dark-green), 0.5px 0.5px 1px var(--color-dark-green),