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