Files
BloomValleyNursery/src/styles/community.css
dereklseitz f30c846e9e 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.
2025-09-06 19:29:59 -05:00

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 ↑-↑-↑--| */