SteamWar/Website
10
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

use ViewTransitions Hero

Browse Source
This commit is contained in:
Chaoscaot
2024-03-01 21:58:30 +01:00
parent 474187899f
commit ea46ad57dd
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/announcements/[...slug].astro
View File

@@ -71,17 +71,19 @@ const ogImage = await getImage({
<div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
{post.data.image && (
<div class="absolute top-0 left-0 w-full aspect-video flex justify-center">
<Image src={post.data.image} height="1080" alt=""
<Image src={post.data.image} height="1080" alt="" transition:name={post.data.title + "-image"}
class="rounded-2xl linear-fade object-contain h-full"/>
</div>
)}
<div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
<h1 class="text-4xl mb-0">{post.data.title}</h1>
<h1 class="text-4xl mb-0" transition:name={post.data.title + "-title"}>{post.data.title}</h1>
<h5 class="flex items-center mt-2 text-neutral-300">
<TagSolid class="w-4 h-4 mr-2"/>
{post.data.tags.map(tag => (
<TagComponent tag={tag}/>
))}
<div transition:name={post.data.title + "-tags"}>
{post.data.tags.map(tag => (
<TagComponent tag={tag} />
))}
</div>
<CalendarMonthSolid class="w-4 h-4 mr-2"/>
{Intl.DateTimeFormat(astroI18n.locale, {
day: "numeric",