refactor: Adjust HTML/CSS across content pages for a more cohesive UX
This commit is contained in:
@@ -21,7 +21,7 @@ const TESTIMONIALS = [
|
||||
{
|
||||
"id": "T02",
|
||||
"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"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -10,6 +10,11 @@
|
||||
|
||||
<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 %}
|
||||
{% for style in stylesheet %}
|
||||
<link rel="stylesheet" href="{{ style }}">
|
||||
@@ -19,7 +24,6 @@
|
||||
{% if hCAPTCHA %}
|
||||
<script src="{{ hCAPTCHA }}" async defer></script>
|
||||
{% endif %}
|
||||
|
||||
{% if fontAwesome %}
|
||||
<script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
|
||||
{% endif %}
|
||||
@@ -30,7 +34,7 @@
|
||||
|
||||
{% include "header.njk" %}
|
||||
|
||||
<main>
|
||||
<main class="main-content-container">
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
@@ -40,11 +44,14 @@
|
||||
|
||||
{% include "modals.njk" %}
|
||||
|
||||
<script src="/scripts/demo-modal.js"></script>
|
||||
{% if pageScripts %}
|
||||
{% for script in pageScripts %}
|
||||
<script src="{{ script }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<script src="/scripts/cart.js"></script>
|
||||
<script src="/scripts/newsletter.js">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,8 @@
|
||||
<div id="right-side">
|
||||
<nav id="category-nav">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<h2>Categories</h2>
|
||||
<hr>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
<header role="banner">
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img
|
||||
src="/images/Client1_LogoPalette2_F0C06D.png"
|
||||
<div class="logo-name-cart">
|
||||
<div class="logo-box">
|
||||
<img class="logo" src="/images/Client1_LogoPalette2_F0C06D.png"
|
||||
alt="Bloom Valley Nursery Logo">
|
||||
</div>
|
||||
<div class="name-box">
|
||||
<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="business-name-container">
|
||||
<p class="business-name">Bloom Valley Nursery</p>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<nav role="navigation" aria-label="Main Navigation">
|
||||
<ul>
|
||||
@@ -31,14 +34,4 @@
|
||||
</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>
|
||||
@@ -4,18 +4,11 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
||||
seoIndexing: false
|
||||
title: "Community Events - Bloom Valley Nursery Demo"
|
||||
stylesheet:
|
||||
- "/styles/variables.css"
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/community.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modals.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
currentPage: "community"
|
||||
pageScripts:
|
||||
- "/scripts/events-carousel.js"
|
||||
- "/scripts/cart.js"
|
||||
- "/scripts/newsletter.js"
|
||||
---
|
||||
<div class="community">
|
||||
<h1>Mark Your Calendars!</h1>
|
||||
@@ -24,6 +17,7 @@ pageScripts:
|
||||
|
||||
<div class="upcoming-events">
|
||||
<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">
|
||||
<ul class="event-categories">
|
||||
<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">
|
||||
<p>
|
||||
For more details, to add events to this page, or to leave feedback,
|
||||
<a
|
||||
<a class="com-link"
|
||||
href="/about/#feedback"
|
||||
aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
|
||||
>click here</a
|
||||
|
||||
@@ -4,29 +4,35 @@ metaDesc: "Credit & attribution for the contributors of this demo eCommerce webs
|
||||
seoIndexing: true
|
||||
title: "Credits & Attribution - Bloom Valley Nursery Demo"
|
||||
stylesheet:
|
||||
- "/styles/variables.css"
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/credits.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modals.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
isLandingPage: false
|
||||
pageScripts:
|
||||
- "/scripts/tooltips.js"
|
||||
- "/scripts/script.js"
|
||||
- "/scripts/cart.js"
|
||||
- "/scripts/newsletter.js"
|
||||
---
|
||||
|
||||
<div class="credits-container">
|
||||
<div class="content">
|
||||
<div class="intro">
|
||||
<h1>Credits & Attributions</h1>
|
||||
<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 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>
|
||||
<ul class="credits-list">
|
||||
<div class="video-box">
|
||||
<h2 class="videos">Video Content</h2>
|
||||
<ul class="videos-credits-list">
|
||||
<li class="credit" data-tooltip="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">
|
||||
<div class="meta">
|
||||
<p>
|
||||
<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>.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</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">
|
||||
@@ -37,7 +43,7 @@ pageScripts:
|
||||
loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="meta" >
|
||||
<div class="meta">
|
||||
<p>
|
||||
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> .
|
||||
@@ -47,4 +53,5 @@ pageScripts:
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,23 +4,16 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
||||
seoIndexing: false
|
||||
title: "Gallery - Bloom Valley Nursery Demo"
|
||||
stylesheet:
|
||||
- "/styles/variables.css"
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/gallery.css"
|
||||
- "/styles/category-nav.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modals.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
currentPage: "gallery"
|
||||
pageScripts:
|
||||
- "/scripts/gallery-carousel.js"
|
||||
- "/scripts/script.js"
|
||||
- "/scripts/cart.js"
|
||||
- "/scripts/newsletter.js"
|
||||
---
|
||||
|
||||
<div id="gallery-top">
|
||||
<div class="left-side">
|
||||
<section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
|
||||
<h2>Products by Category</h2>
|
||||
<div id="product-category-card">
|
||||
@@ -46,7 +39,8 @@ pageScripts:
|
||||
<button id="cart-details">View Shopping Cart</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<div class="right-side">
|
||||
{% include "category-nav.njk" %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,19 +4,12 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
||||
seoIndexing: false
|
||||
title: "Landing - Bloom Valley Nursery Demo"
|
||||
stylesheet:
|
||||
- "/styles/variables.css"
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/index.css"
|
||||
- "/styles/category-nav.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modal.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
currentPage: "index"
|
||||
pageScripts:
|
||||
- "/scripts/script.js"
|
||||
- "/scripts/cart.js"
|
||||
- "/scripts/newsletter.js"
|
||||
---
|
||||
|
||||
<!-- Main Content Section -->
|
||||
@@ -40,7 +33,7 @@ pageScripts:
|
||||
<h2 id="testimonials-heading">What Others Say</h2>
|
||||
{% for item in testimonials.TESTIMONIALS %}
|
||||
<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>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -58,7 +51,7 @@ pageScripts:
|
||||
<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">
|
||||
<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>
|
||||
</figure>
|
||||
<p class="price">${{ item.price }}</p>
|
||||
|
||||
54
src/scripts/demo-modal.js
Normal file
54
src/scripts/demo-modal.js
Normal 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);
|
||||
}
|
||||
});
|
||||
@@ -71,6 +71,20 @@ const updateProductList = (category) => {
|
||||
const productList = document.getElementById("product-list");
|
||||
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);
|
||||
currentIndex = 0;
|
||||
|
||||
|
||||
@@ -1,58 +1,6 @@
|
||||
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);
|
||||
}
|
||||
|
||||
// ================== SHOPPER PROMO CAROUSEL ==================
|
||||
// ================== PROMOS CAROUSEL ==================
|
||||
const promo = document.querySelectorAll(".promo-item");
|
||||
let currentIndexPromo = 0;
|
||||
|
||||
@@ -71,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
showNextPromo();
|
||||
setInterval(showNextPromo, 2250);
|
||||
|
||||
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
|
||||
// ================== TESTIMONIALS CAROUSEL ==================
|
||||
const testimonials = document.querySelectorAll(".testimonial-item");
|
||||
let currentIndexTestimonials = 0;
|
||||
|
||||
@@ -91,19 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
setInterval(showNextTestimonial, 3500);
|
||||
|
||||
// ================== 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");
|
||||
let currentIndexFeatured = 0;
|
||||
|
||||
|
||||
@@ -72,8 +72,10 @@ h2#bvn-story {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid 2px var(--color-mid-green);
|
||||
border: solid 3px var(--color-mid-green);
|
||||
border-radius: 15px;
|
||||
box-shadow: var(--shadow-medium);
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -86,14 +88,6 @@ h2#bvn-story {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
#bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
width: 100%
|
||||
|
||||
}
|
||||
|
||||
#bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -107,7 +101,6 @@ h2#bvn-story {
|
||||
padding: 20px;
|
||||
margin: 30px auto;
|
||||
box-shadow: var(--shadow-medium);
|
||||
|
||||
}
|
||||
|
||||
#business-info {
|
||||
@@ -155,7 +148,10 @@ strong {
|
||||
}
|
||||
|
||||
#feedback h2 {
|
||||
margin: auto;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid 2px var(--color-destin-sand);
|
||||
|
||||
@@ -1,4 +1,13 @@
|
||||
/* 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 {
|
||||
font-size: 17px; /* Base font size for scaling */
|
||||
scroll-behavior: smooth;
|
||||
@@ -9,7 +18,7 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -17,56 +26,53 @@ body {
|
||||
}
|
||||
|
||||
body h1 {
|
||||
text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
|
||||
-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 */
|
||||
text-shadow: var(--text-outline-light);
|
||||
}
|
||||
|
||||
/* Title Large (Arial Bold 30px) */
|
||||
/* Title Large (Arial Bold ~32px) */
|
||||
h1 {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.875rem; /* 30px for title */
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
/* Title (Arial Bold 25px) */
|
||||
/* Title (Arial Bold ~27px) */
|
||||
h2 {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.5625rem;
|
||||
}
|
||||
|
||||
/* Subtitle (Comfortaa Normal 15px) */
|
||||
/* Subtitle (Comfortaa Normal ~16px) */
|
||||
h3 {
|
||||
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 {
|
||||
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 {
|
||||
font-family: 'Calibri', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1rem; /* 16px for body strong */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Body (Calibri Normal 16px) */
|
||||
/* Body (Calibri Normal 17px) */
|
||||
p.body {
|
||||
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 {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: .6875rem; /* 11px for captions */
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
@@ -75,10 +81,11 @@ figcaption {
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
.main-content-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
max-width: 1440px;
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
max-width: 325px;
|
||||
max-width: 225px;
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -79,3 +79,9 @@
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.categories ul li.active {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
@@ -15,17 +15,47 @@ h1 {
|
||||
border: solid var(--color-mid-green);
|
||||
border-radius: 15px;
|
||||
color: var(--color-dark-green);
|
||||
text-decoration: underline;
|
||||
text-shadow: var(--text-outline-heading);
|
||||
padding: 5px 100px;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
@@ -196,7 +226,7 @@ li.enav {
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
margin-botom: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
@@ -210,7 +240,7 @@ li.enav {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: var(--color-pale-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 15px;
|
||||
padding: 0px 20px 10px 20px;
|
||||
width: 95%;
|
||||
@@ -228,6 +258,8 @@ li.enav {
|
||||
border: solid 0.5px var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 2px 20px;
|
||||
box-shadow: var(--shadow-subtle);
|
||||
|
||||
}
|
||||
|
||||
.event-card h3.workshop {
|
||||
|
||||
@@ -1,6 +1,80 @@
|
||||
/* CSS Style Rules for "Credits & Attributions" */
|
||||
.credits-container {
|
||||
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 {
|
||||
@@ -10,13 +84,22 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thanks {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.strong-thanks {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#tip-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.credits-list {
|
||||
.videos-credits-list,
|
||||
.images-credits-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
margin: 0 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -25,6 +108,7 @@
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem; /* spacing between thumb and text */
|
||||
margin-bottom: 1rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
@@ -65,3 +149,4 @@
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
}
|
||||
#footer-nav {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
nav ul, #footer-nav ul {
|
||||
@@ -19,7 +20,6 @@ nav ul, #footer-nav ul {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
flex-direction: row;
|
||||
margin-top: 20px;
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
@@ -145,4 +145,17 @@ footer div label {
|
||||
#copyright {
|
||||
text-align: center;
|
||||
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);
|
||||
}
|
||||
@@ -8,15 +8,23 @@
|
||||
#gallery-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
gap: 10px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 95vw;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#product-carousel-feature {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#product-carousel-feature h2 {
|
||||
@@ -29,7 +37,6 @@
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
padding-left: 20px;
|
||||
transform: translateX(30px);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
@@ -38,27 +45,26 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 65vw;
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
#product-carousel {
|
||||
display: flex;
|
||||
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' */
|
||||
scroll-behavior: smooth; /* Smooth scrolling for buttons */
|
||||
padding: 10px; /* Optional padding inside the carousel */
|
||||
white-space: nowrap; /* Prevent wrapping to a new row */
|
||||
transform: translateX(4vw);
|
||||
min-height: 600px;
|
||||
min-height: 550px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
max-height: 350px;
|
||||
flex: 0 0 auto; /* Prevent resizing of cards */
|
||||
border: 1px solid var(--color-dark-green);
|
||||
@@ -67,6 +73,7 @@
|
||||
margin-left: 20px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
background-color: var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: all 0.5s ease-in-out; /* Added for smooth transitions */
|
||||
@@ -93,10 +100,9 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* New style for the centered card */
|
||||
.product-card.is-centered {
|
||||
width: 340px;
|
||||
transform: scale(1.4);
|
||||
transform: scale(1.2);
|
||||
box-shadow: var(--shadow-strong);
|
||||
background-color: var(--color-destin-sand);
|
||||
white-space: normal;
|
||||
@@ -105,12 +111,11 @@
|
||||
#scroll-left, #scroll-right {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-dark-green);
|
||||
color: white;
|
||||
color: var(--color-destin-sand);
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
transform: translateX(4.5vw);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -163,4 +168,8 @@
|
||||
color: var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
|
||||
|
||||
.right-side {
|
||||
margin-left: 48px;
|
||||
margin-top: 52px;
|
||||
}
|
||||
@@ -1,79 +1,70 @@
|
||||
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
||||
header {
|
||||
padding: 20px;
|
||||
padding-top: 20px;
|
||||
background-color: var(--color-light-teal);
|
||||
border-bottom: 3px solid var(--color-mid-green);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 1400px;
|
||||
align-items: center;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
gap: 20px; /* Adds space between columns */
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Left column - Logo */
|
||||
.header-left {
|
||||
flex: 0 0 150px; /* Fixed width for logo */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Center column - Business name and navigation */
|
||||
.header-center {
|
||||
flex: 1;
|
||||
min-width: 0; /* Prevents flex item from overflowing */
|
||||
max-width: 800px;
|
||||
margin: 0;
|
||||
.logo-name-cart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
/* Right column - Shopping cart */
|
||||
.header-right {
|
||||
flex: 0 0 150px; /* Fixed width for shopping cart */
|
||||
.logo-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Logo styles */
|
||||
header .logo {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
header .logo img {
|
||||
img.logo {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: 50px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
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-container {
|
||||
width: 100%;
|
||||
.name-box {
|
||||
display: flex;
|
||||
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;
|
||||
margin-bottom: 15px;
|
||||
text-shadow: var(--text-outline-business);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
width: 100%;
|
||||
.cart-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 1;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* Shopping cart button */
|
||||
#shopping-cart {
|
||||
position: static;
|
||||
position: block;
|
||||
padding: 15px;
|
||||
margin-left: 75px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
@@ -82,149 +73,8 @@ header .logo img {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--shadow-strong);
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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;
|
||||
width: 60px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
#shopping-cart:hover {
|
||||
@@ -234,16 +84,38 @@ nav {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
gap: 40px;
|
||||
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
@@ -264,7 +136,7 @@ nav ul li {
|
||||
}
|
||||
|
||||
.community-link {
|
||||
font-size: 0.9em;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
.main-content-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
align-items: flex-start;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.promo-item,
|
||||
@@ -15,14 +15,21 @@
|
||||
.promo-item.visible,
|
||||
.testimonial-item.visible,
|
||||
.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,
|
||||
#category-nav {
|
||||
flex: 1;
|
||||
box-shadow: var(--shadow-strong);
|
||||
max-width: 325px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#left-side {
|
||||
@@ -60,8 +67,8 @@
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 200px;
|
||||
min-height: 200px;
|
||||
max-height: 250px;
|
||||
min-height: 250px;
|
||||
max-width: 350px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
@@ -93,19 +100,23 @@
|
||||
}
|
||||
|
||||
.testimonial-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 200px;
|
||||
max-height: 275px;
|
||||
max-width: 350px;
|
||||
min-height: 200px;
|
||||
min-height: 275px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* FEATURED ITEMS */
|
||||
#featured-container {
|
||||
display: flex;
|
||||
@@ -125,7 +136,7 @@
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
border-radius: 15px;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
margin: 0px;
|
||||
@@ -170,6 +181,8 @@
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
width: 480px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
#featured-list {
|
||||
|
||||
@@ -25,6 +25,12 @@
|
||||
-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 */
|
||||
--text-shadow-layered:
|
||||
0.5px 0.5px 1px var(--color-dark-green),
|
||||
|
||||
Reference in New Issue
Block a user