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

update carousel styles; add support for dark mode by introducing inverted color classes for better visibility

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-16 20:34:05 +02:00
parent ba25e3ab2f
commit bec704f9d4
1 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Carousel.pug
View File

@@ -2,6 +2,7 @@ mixin Carousel(items, options)
// Set options with fallbacks for defaults
- const id = options.id || "carousel";
- const color = "black";
- const colorInverted = "white";
- 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
@@ -59,7 +60,7 @@ mixin Carousel(items, options)
.flex.flex-wrap.gap-2.mt-3
each tech in item.technologies
span.inline-block.px-3.py-1.text-sm.font-medium.rounded-full.shadow-sm(
class=`bg-nls-${color}/10 text-nls-${color} border border-nls-${color}/20`
class=`bg-nls-${color}/10 text-nls-${color} border border-nls-${color}/20 dark:bg-nls-${colorInverted}/20 dark:text-nls-${colorInverted} dark:border-nls-${colorInverted}/30`
)= tech
if item.href
p.text-sm.mt-4.underline(class="sm:text-base hover:text-nls-black dark:hover:text-nls-white")= item.href