tikaiz/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carousel is now as big as the other elements
All checks were successful
publish.yml / publish (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Tim Kainz
2026-04-16 19:44:48 +02:00
parent 7032968fe2
commit 3072668e05
2 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/home/home.css
View File

@@ -141,16 +141,23 @@ h2 {
} }
.stack-carousel-shell { .stack-carousel-shell {
display: grid; --carousel-nav-space: 4.25rem;
grid-template-columns: auto 1fr auto; position: relative;
gap: 0.75rem; width: calc(100% + (var(--carousel-nav-space) * 2));
align-items: center; 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 { .stack-carousel {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
overflow-x: auto; overflow-x: auto;
width: 100%;
padding: 0.2rem; padding: 0.2rem;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
scrollbar-width: thin; scrollbar-width: thin;
@@ -230,6 +237,8 @@ h2 {
} }
.carousel-btn { .carousel-btn {
position: absolute;
top: 50%;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border: 1px solid #3d444d; border: 1px solid #3d444d;
@@ -240,22 +249,30 @@ h2 {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
pointer-events: none; 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; 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:hover .carousel-btn,
.stack-carousel-shell:focus-within .carousel-btn { .stack-carousel-shell:focus-within .carousel-btn {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
pointer-events: auto; pointer-events: auto;
transform: translateY(0); transform: translateY(-50%);
} }
.carousel-btn:hover { .carousel-btn:hover {
border-color: #58a6ff; border-color: #58a6ff;
background: rgba(56, 139, 253, 0.2); background: rgba(56, 139, 253, 0.2);
transform: translateY(-1px); transform: translateY(calc(-50% - 1px));
} }
.carousel-btn:focus-visible { .carousel-btn:focus-visible {
@@ -292,7 +309,13 @@ h2 {
} }
.stack-carousel-shell { .stack-carousel-shell {
grid-template-columns: 1fr; --carousel-nav-space: 0;
width: 100%;
margin-inline: 0;
}
.stack-carousel-column {
width: 100%;
} }
.carousel-btn { .carousel-btn {

42
src/pages/home/home.html
View File

@@ -48,26 +48,28 @@
<span aria-hidden="true">&larr;</span> <span aria-hidden="true">&larr;</span>
</button> </button>
<div class="stack-carousel" #stackCarousel role="region" aria-label="Tech stack carousel"> <div class="stack-carousel-column">
@for (skill of skills; track skill.name) { <div class="stack-carousel" #stackCarousel role="region" aria-label="Tech stack carousel">
<app-card cardClass="skill-card stack-slide"> @for (skill of skills; track skill.name) {
<div class="skill-heading"> <app-card cardClass="skill-card stack-slide">
<span class="skill-icon" role="img" [attr.aria-label]="skill.name + ' logo'"> <div class="skill-heading">
<img <span class="skill-icon" role="img" [attr.aria-label]="skill.name + ' logo'">
class="skill-logo" <img
[src]="skill.logoUrl" class="skill-logo"
[alt]="skill.name + ' logo'" [src]="skill.logoUrl"
loading="lazy" [alt]="skill.name + ' logo'"
decoding="async" loading="lazy"
(error)="onLogoError($event)" decoding="async"
/> (error)="onLogoError($event)"
<span class="skill-fallback" aria-hidden="true">{{ skill.fallbackLabel }}</span> />
</span> <span class="skill-fallback" aria-hidden="true">{{ skill.fallbackLabel }}</span>
<h3>{{ skill.name }}</h3> </span>
</div> <h3>{{ skill.name }}</h3>
<p class="meta">{{ skill.category }} - {{ skill.level }}</p> </div>
</app-card> <p class="meta">{{ skill.category }} - {{ skill.level }}</p>
} </app-card>
}
</div>
</div> </div>
<button class="carousel-btn" type="button" aria-label="Next technologies" (click)="scrollStack(1)"> <button class="carousel-btn" type="button" aria-label="Next technologies" (click)="scrollStack(1)">