dereklseitz/BloomValleyNursery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Updated style rules to fix issues with component placement on landing page

Browse Source
This commit is contained in:
Derek L. Seitz
2025-09-07 20:25:14 -05:00
parent 601ff81c62
commit 20e2569ad9
8 changed files with 589 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/styles/index.css
View File

@@ -1,3 +1,10 @@
/* Stylesheet for index.html */
.main-content-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 50px;
}
.promo-item,
.testimonial-item,
@@ -15,6 +22,7 @@
#category-nav {
flex: 1;
box-shadow: var(--shadow-strong);
max-width: 325px;
}
#left-side {
@@ -24,6 +32,7 @@
border: solid var(--color-destin-sand);
padding: 5px 10px;
margin-top: 10px;
margin-left: 0;
border-radius: 10px;
}
@@ -51,9 +60,9 @@
border-radius: 10px;
padding: 5px 10px;
white-space: normal;
max-height: 175px;
min-height: 175px;
max-width: 400px;
max-height: 200px;
min-height: 200px;
max-width: 350px;
box-shadow: var(--shadow-strong);
text-align: center;
}
@@ -65,6 +74,39 @@
box-shadow: var(--shadow-strong);
}
/* --- 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: var(--shadow-strong);
}
#testimonials-container h2 {
font-size: 1.675rem;
text-align: center;
}
.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: 200px;
max-width: 350px;
min-height: 200px;
box-shadow: var(--shadow-strong);
text-align: center;
}
/* FEATURED ITEMS */
#featured-container {
display: flex;
flex: 2;
@@ -77,16 +119,16 @@
}
#featured-container h2 {
font-size: 1.875rem;
font-size: 2.675rem;
text-align: center;
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;
padding: 0 50px;
margin: 0px;
box-shadow: var(--shadow-medium);
}
@@ -96,11 +138,14 @@
flex-direction: column;
align-items: center;
padding: 0;
box-shadow: var(--shadow-strong);
}
#featured-list {
border: solid var(--color-mid-green);
border-radius: 10px;
box-shadow: var(--shadow-strong);
}
@@ -108,7 +153,7 @@
color: var(--color-dark-green);
background-color: var(--color-destin-sand);
border-radius: 10px;
padding: 5px 10px;
padding: 0px 10px;
display: block;
text-align: center;
font-size: 1.4rem;
@@ -134,6 +179,22 @@
height: auto; /* Let the height adapt to content */
}
.featured-card h3,
.featured-card p,
.feature-card figure,
.featured-card figcaption {
margin: 0;
padding: 0;
}
.featured-card h3.product-name {
margin-top: 5px;
}
.featured-card p.price {
margin-top: 5px;
}
figcaption {
font-size: 1.2rem;
}
@@ -161,46 +222,12 @@ p.short-description {
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: var(--shadow-strong);
}
#testimonials-container h2 {
font-size: 1.675rem;
text-align: center;
}
.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: var(--shadow-strong);
text-align: center;
}
/* --- CATEGORY NAVIGATION --- */
#category-nav {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-soft-gold);
background-color: var(--color-soft-golden);
padding: 5px 10px;
margin-top: 10px;
border: solid var(--color-destin-sand);