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 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 ↑-↑-↑--| */
|
||||
Reference in New Issue
Block a user