Fade in

Author: hasparus

src/components/blog-page/blog-card-picture.tsx

@@ -34,7 +34,6 @@ interface PreparedGradient {
   stops: GradientStop[]
 }
 
-// TODO: Animate nicer on load
 export function BlogCardPicture({
   frontMatter,
   children,
@@ -125,7 +124,7 @@ export function BlogCardPicture({
       <canvas
         ref={canvasRef}
         aria-hidden="true"
-        className="pointer-events-none absolute inset-0 !size-full"
+        className="animate-fade-in pointer-events-none absolute inset-0 !size-full"
       />
       {children ? <div className="relative z-10 p-4">{children}</div> : null}
     </div>

src/components/blog-page/featured-blog-posts.tsx

@@ -51,7 +51,7 @@ export function FeaturedBlogPosts({
           </footer>
         </div>
       </NextLink>
-      <div className="mt-4 grid grid-cols-3 flex-col gap-2 max-lg:flex sm:mt-8 sm:gap-4 lg:mt-16 lg:gap-6">
+      <div className="mt-4 grid grid-cols-3 flex-col gap-2 max-md:flex sm:mt-8 sm:gap-4 lg:mt-16 lg:gap-6">
         {nextThree.map(post => (
           <BlogCard key={post.route} {...post} />
         ))}

src/components/blog-page/index.tsx

@@ -30,18 +30,18 @@ export function BlogPage({ tags, blogs, currentTag }: BlogPageProps) {
             community. Stay connected with the ideas and innovations shaping the
             GraphQL ecosystem.
           </p>
-          <FeaturedBlogPosts blogs={blogs} className="mt-24 max-md:hidden" />
+          <FeaturedBlogPosts blogs={blogs} className="mt-4 lg:mt-24" />
         </header>
       </div>
       <div className="gql-container">
         <div className="gql-section">
-          <section className="flex items-end justify-between gap-2">
+          <section className="flex justify-between gap-2 max-sm:flex-col sm:items-end">
             <h2 className="typography-h2 capitalize">
               {currentTag || "All Posts"}
             </h2>
             <section>
               <h3 className="typography-menu">Categories</h3>
-              <ul className="mt-4 flex flex-wrap gap-2">
+              <ul className="mt-4 flex gap-2 max-sm:overflow-auto sm:flex-wrap">
                 {Object.entries(tags)
                   .sort((a, b) => b[1] - a[1])
                   .map(([tag, count], i) => (

tailwind.config.ts

@@ -80,6 +80,7 @@ const config: Config = {
           "arrow-left var(--animation-duration, .75s) var(--animation-direction, forwards) ease infinite",
         "show-overflow":
           "show-overflow var(--animation-duration, 12s) var(--animation-delay, 1s) var(--animation-direction, forwards) ease infinite",
+        "fade-in": "fade-in var(--animation-duration, 100ms) ease-out forwards",
       },
       keyframes: {
         scroll: {
@@ -103,6 +104,9 @@ const config: Config = {
             transform: "translateX(var(--delta-x))",
           },
         },
+        "fade-in": {
+          to: { opacity: "1" },
+        },
       },
     },
   },