adrian/homepage
Private
Public Access
1
0
Fork 0
Code Activity

feat: update transition styles for ProjectEntry to look better

Browse Source
This commit is contained in:
Adrian Fennert
2026-02-14 16:50:31 +01:00
parent a59070d8ff
commit a271fcb5ed
1 changed files with 49 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/lib/components/ProjectEntry.svelte
View File

@@ -60,24 +60,23 @@
<style> <style>
article { article {
display: block; display: block;
text-wrap: pretty; text-wrap: pretty;
text-wrap: balance; text-wrap: balance;
border-radius: 1rem; border-radius: 1rem;
transition: box-shadow ease-in-out 0.1s, transform ease-in-out 0.3s 0s; transition: box-shadow ease-in-out 0s;
will-change: rotate;
perspective: 1000px; perspective: 1000px;
&:hover { &:hover {
transition: box-shadow ease-in-out 0.1s, transform ease-in-out 0.3s 0.5s; transition: box-shadow ease-in-out 0.1s 0.4s;
transform: translateY(-0.5rem);
box-shadow: var(--color-card-box-shadow); box-shadow: var(--color-card-box-shadow);
} }
} }
:global(article.in-view) { @media (min-width: 768px) {
animation: shake 0.4s ease-in-out; :global(article.in-view) {
animation: shake 0.4s ease-in-out;
}
} }
@keyframes shake { @keyframes shake {
@@ -171,11 +170,11 @@
} }
.back { .back {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
color: white; color: white;
background-image: linear-gradient( background-image: linear-gradient(
@@ -186,53 +185,53 @@
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.tasks { .tasks {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.task-headline {
font-size: 1.25rem;
font-weight: bold;
}
.task-description {
font-size: 1rem;
line-height: 1.5;
}
.tools {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
} }
.tools-headline { .task-headline {
font-size: 1rem; font-size: 1.25rem;
font-weight: bold; font-weight: bold;
} }
.tools-tags { .task-description {
display: flex; font-size: 1rem;
flex-wrap: wrap; line-height: 1.5;
align-items: center; }
justify-content: center;
gap: 0.5rem; .tools {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.tools-headline {
font-size: 1rem;
font-weight: bold;
}
.tools-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: unset; margin: unset;
padding: unset; padding: unset;
list-style: none; list-style: none;
} }
.tools-tags-tag { .tools-tags-tag {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 1rem; border-radius: 1rem;
background-color: var(--color-header-border); background-color: var(--color-header-border);
font-size: 0.875rem; font-size: 0.875rem;
} }
</style> </style>