From 3072668e058079795f2d6b5793f96c604e2db6ce Mon Sep 17 00:00:00 2001
From: Tim Kainz <tikaiz@gmx.at>
Date: Thu, 16 Apr 2026 19:44:48 +0200
Subject: [PATCH] carousel is now as big as the other elements

---
 src/pages/home/home.css  | 39 +++++++++++++++++++++++++++++--------
 src/pages/home/home.html | 42 +++++++++++++++++++++-------------------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/pages/home/home.css b/src/pages/home/home.css
index 4fd31d6..4dbb64e 100644
--- a/src/pages/home/home.css
+++ b/src/pages/home/home.css
@@ -141,16 +141,23 @@ h2 {
 }
 
 .stack-carousel-shell {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 0.75rem;
-  align-items: center;
+  --carousel-nav-space: 4.25rem;
+  position: relative;
+  width: calc(100% + (var(--carousel-nav-space) * 2));
+  margin-inline: calc(var(--carousel-nav-space) * -1);
+  overflow: visible;
+}
+
+.stack-carousel-column {
+  width: calc(100% - (var(--carousel-nav-space) * 2));
+  margin-inline: auto;
 }
 
 .stack-carousel {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
+  width: 100%;
   padding: 0.2rem;
   scroll-snap-type: x mandatory;
   scrollbar-width: thin;
@@ -230,6 +237,8 @@ h2 {
 }
 
 .carousel-btn {
+  position: absolute;
+  top: 50%;
   width: 2.5rem;
   height: 2.5rem;
   border: 1px solid #3d444d;
@@ -240,22 +249,30 @@ h2 {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transform: translateY(2px);
+  transform: translateY(calc(-50% + 2px));
   transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
 }
 
+.stack-carousel-shell > .carousel-btn:first-of-type {
+  left: 0.85rem;
+}
+
+.stack-carousel-shell > .carousel-btn:last-of-type {
+  right: 0.85rem;
+}
+
 .stack-carousel-shell:hover .carousel-btn,
 .stack-carousel-shell:focus-within .carousel-btn {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
-  transform: translateY(0);
+  transform: translateY(-50%);
 }
 
 .carousel-btn:hover {
   border-color: #58a6ff;
   background: rgba(56, 139, 253, 0.2);
-  transform: translateY(-1px);
+  transform: translateY(calc(-50% - 1px));
 }
 
 .carousel-btn:focus-visible {
@@ -292,7 +309,13 @@ h2 {
   }
 
   .stack-carousel-shell {
-    grid-template-columns: 1fr;
+    --carousel-nav-space: 0;
+    width: 100%;
+    margin-inline: 0;
+  }
+
+  .stack-carousel-column {
+    width: 100%;
   }
 
   .carousel-btn {
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
index 2ecbc06..4590bae 100644
--- a/src/pages/home/home.html
+++ b/src/pages/home/home.html
@@ -48,26 +48,28 @@
         <span aria-hidden="true">&larr;</span>
       </button>
 
-      <div class="stack-carousel" #stackCarousel role="region" aria-label="Tech stack carousel">
-        @for (skill of skills; track skill.name) {
-          <app-card cardClass="skill-card stack-slide">
-            <div class="skill-heading">
-              <span class="skill-icon" role="img" [attr.aria-label]="skill.name + ' logo'">
-                <img
-                  class="skill-logo"
-                  [src]="skill.logoUrl"
-                  [alt]="skill.name + ' logo'"
-                  loading="lazy"
-                  decoding="async"
-                  (error)="onLogoError($event)"
-                />
-                <span class="skill-fallback" aria-hidden="true">{{ skill.fallbackLabel }}</span>
-              </span>
-              <h3>{{ skill.name }}</h3>
-            </div>
-            <p class="meta">{{ skill.category }} - {{ skill.level }}</p>
-          </app-card>
-        }
+      <div class="stack-carousel-column">
+        <div class="stack-carousel" #stackCarousel role="region" aria-label="Tech stack carousel">
+          @for (skill of skills; track skill.name) {
+            <app-card cardClass="skill-card stack-slide">
+              <div class="skill-heading">
+                <span class="skill-icon" role="img" [attr.aria-label]="skill.name + ' logo'">
+                  <img
+                    class="skill-logo"
+                    [src]="skill.logoUrl"
+                    [alt]="skill.name + ' logo'"
+                    loading="lazy"
+                    decoding="async"
+                    (error)="onLogoError($event)"
+                  />
+                  <span class="skill-fallback" aria-hidden="true">{{ skill.fallbackLabel }}</span>
+                </span>
+                <h3>{{ skill.name }}</h3>
+              </div>
+              <p class="meta">{{ skill.category }} - {{ skill.level }}</p>
+            </app-card>
+          }
+        </div>
       </div>
 
       <button class="carousel-btn" type="button" aria-label="Next technologies" (click)="scrollStack(1)">