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

update carousel and layout; enhance button sizes, adjust container mixin, and refine footer and landing page styles

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 17:59:38 +02:00
parent 50a50ca094
commit 5fc29c2faf
5 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Carousel.pug
View File

@@ -14,7 +14,7 @@ mixin Carousel(items, options)
aria-label="Previous slide",
onclick=`carouselPrev('${id}'); umami.track('carousel navigation', { direction: 'prev', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(class="sm:w-6 sm:h-6", fill="none", stroke="currentColor", viewBox="0 0 24 24")
svg.w-6.h-6.text-gray-800(class="sm:w-8 sm:h-8", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M15 19l-7-7 7-7")
button.absolute.right-0.z-20.transform(
@@ -22,7 +22,7 @@ mixin Carousel(items, options)
aria-label="Next slide",
onclick=`carouselNext('${id}'); umami.track('carousel navigation', { direction: 'next', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(class="sm:w-6 sm:h-6", fill="none", stroke="currentColor", viewBox="0 0 24 24")
svg.w-6.h-6.text-gray-800(class="sm:w-8 sm:h-8", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M9 5l7 7-7 7")
//- Carousel track
@@ -36,9 +36,9 @@ mixin Carousel(items, options)
.carousel-slide.flex-none.w-full.relative(class=slideClasses, style="scroll-snap-align: start")
if item.type === "image"
.flex.flex-col.relative.overflow-hidden.rounded-lg.mb-4.py-4(class="sm:mx-6 sm:flex-row sm:gap-6")
img.w-full.h-full.object-contain.transition-transform.rounded-lg.shadow-md.duration-300(
class="sm:w-1/2",
a.text-left.flex.flex-col.relative.overflow-hidden.rounded-lg.mb-4.py-4(class="sm:px-6 sm:flex-row sm:gap-6",onclick=`umami.track('carousel image clicked', { category: '${category}', position: 'carousel', label: '${item.alt || item.caption || "image"}', visitDuration: getVisitDuration() })`, href=href, target="_blank", rel="noopener noreferrer")
img.w-full.h-full.object-contain.transition-transform.rounded-lg.duration-300(
class="sm:w-1/2 shadow-lg",
src=item.src,
alt=item.alt,
loading=index < 3 ? "eager" : "lazy"
@@ -49,9 +49,9 @@ mixin Carousel(items, options)
)
p.text-lg.pt-2.font-large(class="sm:text-xl")= item.caption
if item.description
p.text-sm.mt-2(class="sm:text-base sm:w-2/3")= item.description
p.text-sm.mt-2(class="sm:text-base")= item.description
if item.href
a.text-sm.mt-4.underline(class="sm:text-base hover:text-nls-black dark:hover:text-nls-white", href=item.href, target="_blank", rel="noopener noreferrer")= item.href
p.text-sm.mt-4.underline(class="sm:text-base hover:text-nls-black dark:hover:text-nls-white")= item.href
else if item.type === "brand"
.aspect-video.flex.items-center.justify-center.mx-2.mb-4(class="sm:mx-12")
img.max-w-full.max-h-full.min-h-64.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")

5
src/components/Container.pug
View File

@@ -1,3 +1,4 @@
mixin Container
.max-w-screen-sm.mx-auto
mixin Container(orientation)
- const classes = !orientation ? "mx-auto" : orientation === "left" ? "mr-auto" : "ml-auto";
.max-w-screen-sm(class=classes)
block

2
src/components/Footer.pug
View File

@@ -24,7 +24,7 @@ footer#footer
.p-8.bg-white.text-nls-black.pt-20(class="sm:pt-48 dark:bg-nls-black dark:text-white sm:p-20")
+Container
// region Contact
h2.text-5xl.mb-4 #{footer.title}
h2.text-4xl.mb-4 #{footer.title}
p.mb-8.max-w-prose #{footer.content}
.flex.flex-col.items-center.space-y-12.mb-8.gap-8(class="sm:flex-row sm:space-x-6 sm:space-y-0 sm:gap-2")
+Link(footer.githubUrl, "Visit GitHub profile", "_blank", "noopener noreferrer")

6
src/components/Landingpage.pug
View File

@@ -2,7 +2,7 @@ header.bg-white.text-nls-black.relative.overflow-hidden(class="dark:text-white d
.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20")
.max-w-3xl.mb-8.relative(class="w-4/5 min-h-[90vh]")
.peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8.pointer-events-none
h2.tracking-widest.text-xl.font-semibold.opacity-100.transition(class="sm:text-2xl peer-hover:opacity-100", itemprop="name")= landingpage.name
h2.tracking-normal.font-serif.text-xl.font-semibold.opacity-100.transition(class="sm:text-2xl peer-hover:opacity-100", itemprop="name")= landingpage.name
h1.tracking-normal.text-md.mb-16.opacity-95.transition(class="sm:text-lg peer-hover:opacity-100", itemprop="jobTitle")
| #{landingpage.jobTitle[0]}
@@ -377,10 +377,10 @@ header.bg-white.text-nls-black.relative.overflow-hidden(class="dark:text-white d
const canvas = document.getElementById("aurora-canvas");
if (canvas) {
const curtain = new GuillocheCurtain(canvas, {
spread: 7,
spread: 5,
segments: 222,
lineWidth: 2,
splineCount: 12,
splineCount: 22,
groupCount: 2,
canvasExtension: 0.3,
offset: 0.4,

2
src/components/Portfolio.pug
View File

@@ -10,4 +10,4 @@ section#portfolio
p.text-center.pb-12
| Free and Open Source Software, Customer Projects and other useful Applications
.max-w-screen.mx-auto.pb-32(class="sm:max-w-80vw")
+Carousel([...portfolio, ...portfolio, ...portfolio], {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false})
+Carousel(portfolio, {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false})