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