libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

update carousel styles; change default color to black and adjust focus ring styles for navigation buttons

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-16 13:59:32 +02:00
parent be692ac18a
commit 03ec32dd79
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Carousel.pug
View File

@@ -1,7 +1,7 @@
mixin Carousel(items, options)
// Set options with fallbacks for defaults
- const id = options.id || "carousel";
- const color = options.color || "white";
- const color = "black";
- const category = options.category || "portfolio";
- const slideClasses = options.slideClasses || "sm:w-1/2 lg:w-1/3 xl:w-1/4";
// Pass through options even if not used
@@ -10,7 +10,7 @@ mixin Carousel(items, options)
.carousel-container.relative.w-full.overflow-hidden.px-8(class="sm:px-12", id=id)
//- Navigation buttons
button.absolute.left-0.z-20.transform(
class=`-translate-y-1/2 top-1/2 sm:left-2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-1 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
class=`-translate-y-1/2 top-1/2 sm:left-2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-1 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-nls-${color}`,
aria-label="Previous slide",
onclick=`carouselPrev('${id}'); umami.track('carousel navigation', { direction: 'prev', category: '${category}', visitDuration: getVisitDuration() })`
)
@@ -18,7 +18,7 @@ mixin Carousel(items, options)
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M15 19l-7-7 7-7")
button.absolute.right-0.z-20.transform(
class=`top-1/2 sm:right-2 -translate-y-1/2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-1 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
class=`top-1/2 sm:right-2 -translate-y-1/2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-1 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-nls-${color}`,
aria-label="Next slide",
onclick=`carouselNext('${id}'); umami.track('carousel navigation', { direction: 'next', category: '${category}', visitDuration: getVisitDuration() })`
)