For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: Convert the remaining repeated content collections in archive and review pages into semantic lists without changing the rendered layout.
Architecture: Keep the shared footer and nav work untouched. Limit this pass to repeated content groups that should announce item counts and support list navigation. Most changes stay localized to page-level templates and their existing CSS blocks, with small structural updates where related-link groups need a labeled semantic wrapper.
Tech Stack: Jekyll, Liquid, HTML5 semantic elements, page-level CSS, site validation scripts.
Files:
Modify: blog/index.html
Step 1: Convert the archive wrapper into a semantic list
Replace the current archive container with a list wrapper and keep the existing anchor row styling on each item.
<div class="blog-archive">
<ul class="archive-list">
</ul>
</div>
Extend the page-level <style> block so the list renders without bullets or indentation while keeping the row layout unchanged.
.archive-list {
list-style: none;
padding: 0;
margin: 0;
}
.archive-list > li {
margin: 0;
}
Run: bundle exec jekyll build
Expected: build succeeds and the archive page still shows the same rows, spacing, and pagination with no bullet markers.
git add blog/index.html
git commit -m "feat: make blog archive a semantic list"
Files:
Modify: reviews/index.html
Step 1: Convert the review card grids to lists
Wrap each repeated card group in ul.review-list and make each card a single li with a clickable anchor inside it.
<ul class="review-list">
<li>
<a href="camera/fujifilm/x100vi/index.html" class="review-card-link">
<figure class="review-entry wide" style="margin: 0;">
<div class="entry-image">
<img
src="camera/fujifilm/x100vi/images/hero-desk.jpg"
alt="Fujifilm X100VI"
width="1000"
height="1035"
loading="lazy"
/>
</div>
<figcaption class="entry-info">
<span class="entry-tag">Fujifilm // Compact APS-C</span>
<h3 class="entry-title">
X100VI: The Camera That Ends the Workflow Argument
</h3>
<p class="entry-description">
A visual essay on one-time setup, in-camera looks, and everyday
shooting without post-processing burden.
</p>
<div class="entry-meta">
<time datetime="2026-03">March 2026</time>
<span>40MP X-Trans</span>
</div>
</figcaption>
</figure>
</a>
</li>
<li>
<figure class="review-entry coming-soon" style="margin: 0;">
<div class="entry-image">
<span class="nav-link">Coming Soon</span>
</div>
<figcaption>
<span class="entry-tag">Voigtländer // M-Mount</span>
<h3 class="entry-title">35mm f/1.4 MC II Classic</h3>
<p class="entry-description">
The compact masterpiece that challenges the Summicron.
</p>
</figcaption>
</figure>
</li>
</ul>
Use the same structure for the cameras section and the lenses section so the visual grid still reads as a collection of cards.
Keep the current outbound link content and UTM parameters, but wrap each inspiration item in li inside ul.inspiration-list.
<ul class="inspiration-list">
<li>
<a
href="https://www.leicalensesfornormalpeople.com/category/reviews/?utm_source=gurupanguji.com&utm_medium=referral&utm_campaign=reviews_inspirations"
class="inspiration-item"
target="_blank"
rel="noopener noreferrer"
>
<span class="inspiration-name">Leica Lenses for Normal People</span>
<span class="inspiration-desc">
No-nonsense (hilarious) rangefinder optics evaluation.
</span>
</a>
</li>
</ul>
Update the page-level <style> block so the new lists do not show bullets and still use the existing grid spacing.
.review-list,
.inspiration-list {
list-style: none;
padding: 0;
margin: 0;
}
.review-list > li {
margin: 0;
}
.review-card-link {
display: block;
color: inherit;
text-decoration: none;
height: 100%;
}
Run: bundle exec jekyll build
Expected: the review grid and inspiration section render without bullets, indentation, or card-width regressions.
git add reviews/index.html
git commit -m "feat: make review collections semantic lists"
Files:
reviews/camera/fujifilm/x100vi/index.htmlreviews/camera/leica/m11-p/index.htmlModify: any additional review subpages that have a repeated related-links block
Where a related-links block contains multiple sibling anchors, wrap the block in a nav with an explicit label and use a nested list for the repeated links.
<nav class="related-links" aria-label="Related reading">
<h2 id="related-reviews-title">
<span class="red-dot-accent"></span>Related Reading
</h2>
<ul>
<li><a href="../../../index.html">Photography</a></li>
<li><a href="../../../index.html#lenses">Upcoming lens reviews</a></li>
<li><a href="../../../../index.html">Home</a></li>
</ul>
</nav>
Keep single-link blocks as plain links if they are not meaningfully a collection.
Update the page-level CSS for these subpages so the new lists do not change the visual design.
.related-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.related-links li {
margin: 0;
}
Run: bundle exec jekyll build
Expected: the related-links blocks still look the same, but now expose list semantics to assistive technologies.
git add reviews/camera/fujifilm/x100vi/index.html reviews/camera/leica/m11-p/index.html
git commit -m "feat: make related links semantic lists"
Files:
blog/index.htmlreviews/index.htmlreviews/camera/fujifilm/x100vi/index.htmlModify: reviews/camera/leica/m11-p/index.html
Run: bundle exec jekyll build
Expected: build completes successfully with no Liquid errors or HTML validation failures.
Inspect the built output for:
blog/index.htmlreviews/index.htmlreviews/camera/fujifilm/x100vi/index.htmlreviews/camera/leica/m11-p/index.htmlConfirm:
the visual layout still matches the pre-change pages
If the previous tasks were committed individually, leave the branch clean. If not, make one final commit with the remaining page updates.