edi/iten.pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animation Fehler #6

Merged
edi merged 1 commits from dev into main 2026-04-01 08:47:16 +00:00
Conversation 0 Commits 1 Files Changed 2 +16 -2
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ErrorComponent.astro
View File

@@ -18,9 +18,19 @@ const { title = "404" } = Astro.props;
<h1 <h1
class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3" class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3"
> >
<Icon name="tabler:alert-triangle" class="size-9" /> <span class="relative grid h-9 w-9">
<Icon
name="tabler:triangle-filled"
class="col-start-1 row-start-1 size-9 animate-ping opacity-75 translate-x-[-0.25px] translate-y-[-1.5px] blur-[1px]"
/>
<Icon
name="tabler:alert-triangle"
class="col-start-1 row-start-1 size-9 relative"
/>
</span>
Fehler {title} Fehler {title}
</h1> </h1>
<p class="mb-4 text-red-500 py-2 px-4 text-lg"> <p class="mb-4 text-red-500 py-2 px-4 text-lg">
<slot /> <slot />
<a <a
@@ -38,4 +48,8 @@ const { title = "404" } = Astro.props;
.error-component :global(br) { .error-component :global(br) {
@apply mb-3; @apply mb-3;
} }
.error-component .animate-ping {
animation-duration: 2s;
}
</style> </style>