view transition updates #18
|
@ -30,7 +30,7 @@ const post = await getPost(slug);
|
|||
loading="eager"
|
||||
transition:name={'hero:' + post.coverImage.url}
|
||||
/>
|
||||
<h1 class="text-4xl font-bold pt-5">{post.title}</h1>
|
||||
<h1 class="text-4xl font-bold pt-5" transition:name={'banner'} transition:animate={'fade'}>{post.title}</h1>
|
||||
<h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
|
||||
|
||||
<Author post={post}/>
|
||||
|
|
|
@ -9,7 +9,9 @@ const data = await getAboutPage();
|
|||
|
||||
<Layout pageTitle="About">
|
||||
<div class="flex flex-col justify-center p-2">
|
||||
<h2 class="text-3xl mb-3">{data.title} Page</h2>
|
||||
<h2 class="text-3xl mb-3"
|
||||
transition:name={'banner'}
|
||||
transition:animate={'fade'}>{data.title}</h2>
|
||||
<div class="about-content">
|
||||
<Markdown content={data.content.markdown}
|
||||
components={{
|
||||
|
|
|
@ -10,7 +10,7 @@ const allPosts = data.publication.posts.edges;
|
|||
---
|
||||
<Layout pageTitle="Blog">
|
||||
<div class="flex flex-col justify-center items-center p-2">
|
||||
<h2 class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
|
||||
<h2 transition:animate={'fade'} transition:name={'banner'} class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
|
||||
<Posts allPosts={allPosts}/>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -18,7 +18,8 @@ import background from "../assets/blog.jpg";
|
|||
/>
|
||||
<div
|
||||
class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md"
|
||||
transition:animate={'slide'}
|
||||
transition:name={'banner'}
|
||||
transition:animate={'fade'}
|
||||
>
|
||||
<div class="flex pb-5 mb-5 text-5xl text-purple-800">
|
||||
<p>Hashnode Blog</p>
|
||||
|
|
Loading…
Reference in New Issue