Improve mobile styles

Author: hasparus

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

@@ -31,7 +31,7 @@ export function FeaturedBlogPosts({
     >
       <NextLink
         href={firstFeatured.route}
-        className="-m-4 flex min-h-[300px] p-4 ring-neu-0 hover:bg-neu-0/20 hover:ring-1 dark:ring-neu-100 lg:gap-12 [&:not(:hover)]:transition"
+        className="-m-4 flex p-4 ring-neu-0 hover:bg-neu-0/20 hover:ring-1 dark:ring-neu-100 sm:min-h-[300px] lg:gap-12 [&:not(:hover)]:transition"
       >
         <BlogCardPicture
           frontMatter={firstFeatured.frontMatter}
@@ -42,7 +42,7 @@ export function FeaturedBlogPosts({
           <div className="typography-h2 mt-6">
             {firstFeatured.frontMatter.title}
           </div>
-          <footer className="mt-4 flex items-end justify-between lg:mt-auto">
+          <footer className="mt-2 flex items-end justify-between sm:mt-4 lg:mt-auto">
             <BlogCardFooterContent
               byline={firstFeatured.frontMatter.byline}
               date={firstFeatured.frontMatter.date}
@@ -51,7 +51,7 @@ export function FeaturedBlogPosts({
           </footer>
         </div>
       </NextLink>
-      <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">
+      <div className="mt-4 grid grid-cols-3 flex-col gap-4 max-md:flex sm:mt-8 lg:mt-16 lg:gap-6">
         {nextThree.map(post => (
           <BlogCard key={post.route} {...post} />
         ))}

src/components/blog-page/index.tsx

@@ -23,18 +23,21 @@ export function BlogPage({ tags, blogs, currentTag }: BlogPageProps) {
     <main className="gql-all-anchors-focusable bg-neu-0">
       <div className="relative top-[calc(var(--nextra-navbar-height)*-1)] bg-gradient-to-b from-sec-base to-neu-0 pt-[var(--nextra-navbar-height)] dark:from-sec-darker">
         <Stripes />
-        <header className="gql-container gql-section lg:pt-24">
+        <header className="gql-container gql-section max-sm:pb-0 lg:pt-24">
           <h1 className="typography-h1 text-center">The GraphQL Blog</h1>
           <p className="typography-body-sm mt-4 text-center lg:mt-8">
             Insights, updates and best practices from across the GraphQL
             community. Stay connected with the ideas and innovations shaping the
             GraphQL ecosystem.
           </p>
-          <FeaturedBlogPosts blogs={blogs} className="mt-4 lg:mt-24" />
+          <FeaturedBlogPosts
+            blogs={blogs}
+            className="mt-4 max-sm:pb-0 lg:mt-24"
+          />
         </header>
       </div>
       <div className="gql-container">
-        <div className="gql-section">
+        <div className="gql-section max-sm:pt-0">
           <section className="flex justify-between gap-2 max-sm:flex-col sm:items-end">
             <h2 className="typography-h2 capitalize">
               {currentTag || "All Posts"}
@@ -80,7 +83,7 @@ function Stripes() {
   return (
     <div
       role="presentation"
-      className="pointer-events-none absolute inset-0"
+      className="pointer-events-none absolute inset-0 max-sm:[mask-position:left_top]"
       style={{
         maskImage: mask,
         WebkitMaskImage: mask,