fix: hotfixes for Blog index pages styles (#2919)

neondatabase · Feb 12, 2025 · af782f4 · af782f4
1 parent 3b4e163
commit af782f4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/src/app/blog/(index)/category/[slug]/page.jsx b/src/app/blog/(index)/category/[slug]/page.jsx
@@ -17,7 +17,7 @@ const BlogCategoryPage = async ({ params: { slug } }) => {
 
   return (
     <>
-      <BlogHeader title="Blog" basePath={BLOG_BASE_PATH}>
+      <BlogHeader className="lg:-top-[68px] md:-top-[60px]" title="Blog" basePath={BLOG_BASE_PATH}>
         <span className="sr-only">– {category.name}</span>
       </BlogHeader>
       <ScrollLoader itemsCount={8} className="grid grid-cols-2 gap-x-6 xl:gap-x-5 md:grid-cols-1">

diff --git a/src/components/pages/blog/blog-nav-link/blog-nav-link.jsx b/src/components/pages/blog/blog-nav-link/blog-nav-link.jsx
@@ -16,11 +16,9 @@ const BlogNavLink = ({ name, slug }) => {
   return (
     <Link
       className={clsx(
-        'w-full whitespace-pre py-[3px] text-[15px] font-medium tracking-extra-tight text-gray-new-80 transition-colors duration-200',
+        'w-full whitespace-nowrap py-[3px] text-[15px] font-medium tracking-extra-tight text-gray-new-80 transition-colors duration-200',
         'lg:border-b-2 lg:text-sm',
-        isActive
-          ? 'text-green-45 lg:border-green-45 lg:text-white'
-          : 'hover:text-white lg:border-transparent'
+        isActive ? 'text-green-45 lg:border-green-45' : 'hover:text-white lg:border-transparent'
       )}
       to={url}
     >

diff --git a/src/components/pages/blog/blog-post-card/blog-post-card.jsx b/src/components/pages/blog/blog-post-card/blog-post-card.jsx
@@ -136,7 +136,7 @@ const BlogPostCard = ({
           {/* title */}
           <h1
             className={clsx(
-              'font-medium leading-snug tracking-tighter transition-colors duration-200 group-hover:text-green-45 md:text-lg',
+              'font-medium leading-snug tracking-tighter transition-colors duration-200 group-hover:text-gray-new-80 md:text-lg',
               fullSize ? 'text-2xl lg:text-xl' : 'text-xl'
             )}
           >
@@ -146,7 +146,7 @@ const BlogPostCard = ({
           {fullSize && (
             <div
               className={clsx(
-                'mt-2 text-lg font-light tracking-extra-tight text-gray-new-94 lg:text-base md:text-[15px]',
+                'mt-2 font-light tracking-extra-tight text-gray-new-90 lg:text-base md:text-[15px]',
                 largeCover ? 'line-clamp-2' : 'line-clamp-3'
               )}
             >