designslife/dlStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Testimonials: blend into page, inline nav arrows, drop dots

Browse Source 
User wanted the testimonial section to feel "of the page" rather than
a card sitting on top of it, and to occupy less vertical space.

- Strip all chrome from .card--testimonial: transparent background,
  no border, no shadow, no hover lift. Same treatment applied in the
  swiss + cosmos overrides so per-theme backgrounds don't sneak back.
- Restructure the carousel markup to put the prev/next buttons
  directly beside the viewport (carousel--inline = flex row), no
  separate controls block, no dot indicators.
- Shrink the curly quote mark and the avatar (44 -> 32px); tighten
  internal gaps. Removed the rule above the attribution row.
- Keep healthy horizontal padding via clamp() so the arrows don't
  crowd the surrounding sections.
- Update aria-label on the carousel itself instead of the dots so
  screen readers still get position context.
This commit is contained in:
Joel Brock
2026-05-16 09:18:41 -07:00
parent b257d92636
commit 4868111a14
4 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/js/app.js
View File

@@ -155,19 +155,13 @@
let body;
if (isTestimonials) {
const count = (sec.items || []).length;
const dots = Array.from({ length: count }, (_, i) =>
`<button type="button" class="carousel__dot${i === 0 ? " is-active" : ""}" aria-label="Show testimonial ${i + 1} of ${count}" data-slide="${i}"></button>`).join("");
body = `
<div class="carousel" data-carousel data-count="${count}">
<div class="carousel carousel--inline" data-carousel data-count="${count}">
${count > 1 ? `<button type="button" class="carousel__nav carousel__nav--prev" aria-label="Previous testimonial">‹</button>` : ""}
<div class="carousel__viewport">
<div class="carousel__track" aria-live="polite">${items}</div>
</div>
${count > 1 ? `
<div class="carousel__controls">
<button type="button" class="carousel__nav carousel__nav--prev" aria-label="Previous testimonial">‹</button>
<div class="carousel__dots" role="tablist">${dots}</div>
<button type="button" class="carousel__nav carousel__nav--next" aria-label="Next testimonial">›</button>
</div>` : ""}
${count > 1 ? `<button type="button" class="carousel__nav carousel__nav--next" aria-label="Next testimonial">›</button>` : ""}
</div>`;
} else {
const gridClass = isClients ? "grid--clients" : "grid";
@@ -475,6 +469,7 @@
i = (n + slides.length) % slides.length;
slides.forEach((s, k) => s.classList.toggle("is-active", k === i));
dots.forEach((d, k) => d.classList.toggle("is-active", k === i));
car.setAttribute("aria-label", `Testimonial ${i + 1} of ${slides.length}`);
};
show(0);