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

132
src/index.njk
View File

@@ -19,71 +19,73 @@ pageScripts:
---
<!-- Main Content Section -->
<div id="left-side">
<!-- Promo Feature -->
<section id="promos-container">
<h2 id="promos-heading">Shopper Promos</h2>
{% for promo in promotions.PROMOS %}
<div id="{{ promo.id }}" class="promo-item">
<h3 class="promo-title">{{ promo.title }}</h3>
<p class="promo-description">{{ promo.description }}</p>
<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
</div>
{% endfor %}
</section>
<!-- Testimonials Feature -->
<section id="testimonials-container">
<h2 id="testimonials-heading">What Others Say</h2>
{% for item in testimonials.TESTIMONIALS %}
<div id="{{ id }}" class="testimonial-item">
<h3 class="client-name">{{ item.clientName }} said<h3>
<p class="client-quote">"{{ item.testimonial }}"</p>
</div>
{% endfor %}
</section>
</div>
<div id="center">
<section id="featured-container">
<h2 class="featured-heading">Featured Items</h2>
<ul id="featured-list">
{% for item in inventory.INVENTORY %}
{% if item.isFeatured %}
<li>
<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
<a href="/gallery/">
<h3 class="product-name">{{ item.productName }}</h3>
<figure>
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
</figure>
<p class="price">${{ item.price }}</p>
</a>
</div>
</li>
{% endif %}
<div class="main-content-container">
<div id="left-side">
<!-- Promo Feature -->
<section id="promos-container">
<h2 id="promos-heading">Shopper Promos</h2>
{% for promo in promotions.PROMOS %}
<div id="{{ promo.id }}" class="promo-item">
<h3 class="promo-title">{{ promo.title }}</h3>
<p class="promo-description">{{ promo.description }}</p>
<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
</div>
{% endfor %}
</ul>
</section>
</div>
</section>
<div id="right-side">
<nav id="category-nav">
<div id="category-nav-container">
<h2>Shop by Category</h2>
<div class="categories">
<ul>
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
</ul>
</div>
</div>
</nav>
<!-- Testimonials Feature -->
<section id="testimonials-container">
<h2 id="testimonials-heading">What Others Say</h2>
{% for item in testimonials.TESTIMONIALS %}
<div id="{{ id }}" class="testimonial-item">
<h3 class="client-name">{{ item.clientName }} said<h3>
<p class="client-quote">"{{ item.testimonial }}"</p>
</div>
{% endfor %}
</section>
</div>
<div id="center">
<section id="featured-container">
<h2 class="featured-heading">Featured Items</h2>
<ul id="featured-list">
{% for item in inventory.INVENTORY %}
{% if item.isFeatured %}
<li>
<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
<a href="/gallery/">
<h3 class="product-name">{{ item.productName }}</h3>
<figure>
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
</figure>
<p class="price">${{ item.price }}</p>
</a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</section>
</div>
<div id="right-side">
<nav id="category-nav">
<div id="category-nav-container">
<h2>Shop by Category</h2>
<div class="categories">
<ul>
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>