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

80
src/styles/gallery.css
View File

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