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 ↑-↑-↑--| */
|
||||
@@ -13,18 +13,16 @@ body {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #bdd4da; /* Sky Bloom */
|
||||
background-color: var(--color-light-teal); /* Sky Bloom */
|
||||
}
|
||||
|
||||
body h1 {
|
||||
text-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 */
|
||||
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 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Title Large (Arial Bold 30px) */
|
||||
h1 {
|
||||
font-family: 'Arial', sans-serif;
|
||||
@@ -72,12 +70,11 @@ figcaption {
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
html{
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
||||
.community {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10,17 +10,14 @@
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2.3rem;
|
||||
background-color: #f7f7f7;
|
||||
border: solid #96baa0;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-mid-green);
|
||||
border-radius: 15px;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
text-decoration: underline;
|
||||
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 */
|
||||
text-shadow: var(--text-outline-heading);
|
||||
padding: 5px 100px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
#calendar-events-container {
|
||||
@@ -30,14 +27,14 @@ h1 {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.calendar iframe{
|
||||
.calendar iframe {
|
||||
width: 975px;
|
||||
height: 750px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #bdd4da;
|
||||
background-color: var(--color-light-teal);
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.upcoming-events {
|
||||
@@ -51,30 +48,30 @@ h1 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #f0c06d;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-soft-golden);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
width: 80vw;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.events h2 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px .5px #014038, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px .5px #014038, /* Top-left top shadow */
|
||||
-0.5px 0.5px .5px #014038, /* Bottom-left top shadow */
|
||||
0.5px -0.5px .5px #014038; /* Top-right top shadow */
|
||||
color: #f7f7f7;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
text-shadow: 0.5px 0.5px .5px var(--color-dark-green),
|
||||
-0.5px -0.5px .5px var(--color-dark-green),
|
||||
-0.5px 0.5px .5px var(--color-dark-green),
|
||||
0.5px -0.5px .5px var(--color-dark-green);
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.upcoming-events {
|
||||
@@ -82,41 +79,39 @@ h1 {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #CADCD0;
|
||||
border: solid #014038;
|
||||
background-color: var(--color-pale-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
padding: 0px 20px 10px 20px;
|
||||
width: 95%;
|
||||
margin-top: 20px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.zoho-event {
|
||||
background-color:#f7f7f7;
|
||||
border: solid #014038 2px;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green) 2px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
max-width: 1200px;
|
||||
|
||||
}
|
||||
|
||||
.zoho-event h3 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-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: #014038;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
text-shadow: 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);
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-light-teal);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.zoho-event p {
|
||||
@@ -137,22 +132,21 @@ h1 {
|
||||
|
||||
.event-list ul {
|
||||
list-style-type: none;
|
||||
|
||||
}
|
||||
|
||||
.event-list li {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #bdd4da;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-light-teal);
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
.events strong {
|
||||
color:#014038;
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */
|
||||
/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */
|
||||
@@ -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 ↑-↑-↑--| */
|
||||
@@ -1,8 +1,8 @@
|
||||
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start Header ↓-↓-↓--| */
|
||||
header {
|
||||
padding: 20px;
|
||||
background-color: #bdd4da;
|
||||
border-bottom: 3px solid #96baa0;
|
||||
background-color: var(--color-light-teal);
|
||||
border-bottom: 3px solid var(--color-mid-green);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ header .logo img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: 50px;
|
||||
filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038);
|
||||
filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
|
||||
}
|
||||
|
||||
/* Business name and navigation container */
|
||||
@@ -75,12 +75,12 @@ header .logo img {
|
||||
position: static;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -91,19 +91,16 @@ header .logo img {
|
||||
font-family: 'Georgia', serif;
|
||||
display: block;
|
||||
font-size: 3.6rem;
|
||||
color: #014038; /* Dark green for the title */
|
||||
color: var(--color-dark-green); /* Dark green for the title */
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px 1px #f7f7f7, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px 1px #f7f7f7, /* Top-left top shadow */
|
||||
-0.5px 0.5px 1px #f7f7f7, /* Bottom-left top shadow */
|
||||
0.5px -0.5px 1px #f7f7f7; /* Top-right top shadow */
|
||||
text-shadow: var(--text-outline-heading);
|
||||
}
|
||||
|
||||
header p.tagline {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
color: #96baa0; /* Pale green for the tagline */
|
||||
color: var(--color-mid-green); /* Pale green for the tagline */
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -167,7 +164,7 @@ header p.tagline {
|
||||
display: block;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -176,9 +173,9 @@ header p.tagline {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
nav.is-open {
|
||||
@@ -205,11 +202,11 @@ header p.tagline {
|
||||
|
||||
nav, #footer-nav {
|
||||
margin-top: 20px;
|
||||
background-color: #f7f7f7; /* White for navigation background */
|
||||
background-color: var(--color-destin-sand); /* White for navigation background */
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
width: 100%; /* Ensures the nav spans the width of the header */
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
#shopping-cart {
|
||||
@@ -218,12 +215,12 @@ nav, #footer-nav {
|
||||
right: 100px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
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: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -231,10 +228,10 @@ nav, #footer-nav {
|
||||
}
|
||||
|
||||
#shopping-cart:hover {
|
||||
background-color: #014038;
|
||||
color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--color-dark-green);
|
||||
color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
nav ul, #footer-nav ul {
|
||||
@@ -257,13 +254,13 @@ nav ul li, #footer-nav ul li {
|
||||
.current-page {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
background-color: #96baa0;
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-mid-green);
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
white-space: wrap;
|
||||
text-align: center;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.community-link {
|
||||
@@ -274,7 +271,7 @@ nav ul li a, #footer-nav ul li a {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
text-decoration: underline;
|
||||
padding: 8px 15px;
|
||||
border-radius: 10px;
|
||||
@@ -282,14 +279,14 @@ nav ul li a, #footer-nav ul li a {
|
||||
}
|
||||
|
||||
nav ul li a:hover, #footer-nav ul li a:hover {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid .5px #014038;
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid .5px var(--color-dark-green);
|
||||
padding: 7px 14px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
|
||||
/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -310,7 +307,7 @@ nav ul li a:hover, #footer-nav ul li a:hover {
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
}
|
||||
|
||||
button#submit-btn {
|
||||
@@ -318,25 +315,25 @@ button#submit-btn {
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
footer div label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #014038
|
||||
color: var(--color-dark-green);
|
||||
}
|
||||
|
||||
#newsletter-form {
|
||||
display: inline-block;
|
||||
background-color: #f0c06d;
|
||||
border: solid #f7f7f7;
|
||||
background-color: var(--color-soft-golden);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
width: 60%;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
/* #footer-nav {
|
||||
@@ -348,7 +345,7 @@ footer div label {
|
||||
list-style-type: none;
|
||||
flex-direction: row;
|
||||
margin-top: 20px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
@@ -364,8 +361,8 @@ footer div label {
|
||||
#footer-nav ul li .current-page {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
background-color: #96baa0;
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-mid-green);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -373,7 +370,7 @@ footer div label {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
@@ -381,9 +378,9 @@ footer div label {
|
||||
}
|
||||
|
||||
#footer-nav ul li a:hover {
|
||||
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;
|
||||
} */
|
||||
|
||||
@@ -410,13 +407,13 @@ text-align: center;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 0 10px;
|
||||
color: #014038;
|
||||
color: var(--color-dark-green);
|
||||
}
|
||||
|
||||
#social-media ul li a {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: #014038; /* Dark green for the links */
|
||||
color: var(--color-dark-green); /* Dark green for the links */
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
@@ -424,10 +421,9 @@ text-align: center;
|
||||
}
|
||||
|
||||
#social-media ul li a:hover {
|
||||
background-color: #f0c06d;
|
||||
color: #f7f7f7;
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
background-color: var(--color-soft-golden);
|
||||
color: var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#copyright {
|
||||
@@ -473,4 +469,4 @@ text-align: center;
|
||||
|
||||
.visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-destin-sand: #f7f7f7;
|
||||
--color-dark-green: #014038;
|
||||
--color-mid-green: #96baa0;
|
||||
--color-pale-green: #cadcd0;
|
||||
--color-light-teal: #bdd4da;
|
||||
--color-soft-golden: #f0c06d;
|
||||
|
||||
/* Box Shadows */
|
||||
--shadow-subtle: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
--shadow-strong: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* Text Outline */
|
||||
--text-outline-heading:
|
||||
0.5px 0.5px 1px var(--color-dark-green),
|
||||
-0.5px -0.5px 1px var(--color-dark-green),
|
||||
-0.5px 0.5px 1px var(--color-dark-green),
|
||||
0.5px -0.5px 1px var(--color-dark-green);
|
||||
|
||||
/* Layered Text Shadow */
|
||||
--text-shadow-layered:
|
||||
0.5px 0.5px 1px var(--color-dark-green),
|
||||
-0.5px -0.5px 1px var(--color-dark-green),
|
||||
-0.5px 0.5px 1px var(--color-dark-green),
|
||||
0.5px -0.5px 1px var(--color-dark-green),
|
||||
0.5px 0.5px .5px var(--color-light-teal),
|
||||
-0.5px -0.5px .5px var(--color-light-teal),
|
||||
-0.5px 0.5px .5px var(--color-light-teal),
|
||||
0.5px -0.5px .5px var(--color-light-teal),
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user