MatthiesenXYZ
/
astro-hashnode
1
0
Fork 0
Code Issues Pull Requests Packages Releases 9 Activity

Even better animations

This commit is contained in:
Adam Matthiesen 2024-03-13 23:45:11 -07:00
parent 22d1570817
commit 0064083f63
No known key found for this signature in database
GPG Key ID: 3F53281CB3936013
4 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/src/pages/blog/[slug].astro
View File

@ -30,7 +30,7 @@ const post = await getPost(slug);
loading="eager" loading="eager"
transition:name={'hero:' + post.coverImage.url} 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> <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
<Author post={post}/> <Author post={post}/>

4
package/src/pages/blog/about.astro
View File

@ -9,7 +9,9 @@ const data = await getAboutPage();
<Layout pageTitle="About"> <Layout pageTitle="About">
<div class="flex flex-col justify-center p-2"> <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"> <div class="about-content">
<Markdown content={data.content.markdown} <Markdown content={data.content.markdown}
components={{ components={{

2
package/src/pages/blog/index.astro
View File

@ -10,7 +10,7 @@ const allPosts = data.publication.posts.edges;
--- ---
<Layout pageTitle="Blog"> <Layout pageTitle="Blog">
<div class="flex flex-col justify-center items-center p-2"> <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}/> <Posts allPosts={allPosts}/>
</div> </div>

3
package/src/pages/index.astro
View File

@ -18,7 +18,8 @@ import background from "../assets/blog.jpg";
/> />
<div <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" 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"> <div class="flex pb-5 mb-5 text-5xl text-purple-800">
<p>Hashnode Blog</p> <p>Hashnode Blog</p>