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