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.
152 lines
3.3 KiB
CSS
152 lines
3.3 KiB
CSS
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
|
.community {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
max-width: 900px;
|
|
}
|
|
|
|
h1 {
|
|
display: block;
|
|
font-size: 2.3rem;
|
|
background-color: var(--color-destin-sand);
|
|
border: solid var(--color-mid-green);
|
|
border-radius: 15px;
|
|
color: var(--color-dark-green);
|
|
text-decoration: underline;
|
|
text-shadow: var(--text-outline-heading);
|
|
padding: 5px 100px;
|
|
box-shadow: var(--shadow-subtle);
|
|
}
|
|
|
|
#calendar-events-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
border: none;
|
|
}
|
|
|
|
.calendar iframe {
|
|
width: 975px;
|
|
height: 750px;
|
|
margin-top: 25px;
|
|
margin-bottom: 20px;
|
|
background-color: var(--color-light-teal);
|
|
border-radius: 15px;
|
|
box-shadow: var(--shadow-subtle);
|
|
}
|
|
|
|
.upcoming-events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
}
|
|
|
|
.events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
background-color: var(--color-soft-golden);
|
|
border: solid var(--color-dark-green);
|
|
border-radius: 15px;
|
|
padding: 10px;
|
|
width: 80vw;
|
|
box-shadow: var(--shadow-subtle);
|
|
}
|
|
|
|
.events h2 {
|
|
font-size: 1.875rem;
|
|
text-align: center;
|
|
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: var(--shadow-medium);
|
|
}
|
|
|
|
.upcoming-events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
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: var(--shadow-subtle);
|
|
}
|
|
|
|
.zoho-event {
|
|
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 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: var(--shadow-medium);
|
|
}
|
|
|
|
.zoho-event p {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.display-date, .location, .add-events {
|
|
font-weight: heavy;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.3rem;
|
|
width: 80%;
|
|
height: auto;
|
|
}
|
|
|
|
.event-list ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.event-list li {
|
|
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: var(--shadow-subtle);
|
|
}
|
|
|
|
.events strong {
|
|
color: var(--color-dark-green);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */ |