Make things less big on /blog page (#1872)

Author: hasparus

website/pages/blog.mdx

@@ -28,7 +28,7 @@ export default function Blog() {
         <Heading>The Guild's blog</Heading>
       </HeroSection>
       <div className="nextra-container">
-        <TagList tags={allTags} withCount asLink className="mb-20 mt-10" />
+        <TagList tags={allTags} withCount asLink className="mb-10 mt-10" />
         {!tagsFilter.length && <Newsletter />}
         {<BlogCardList articles={articles} />}
       </div>

website/ui/components/blog-card-list.tsx

@@ -15,26 +15,29 @@ export const BlogCardList = ({
   className?: string;
 }): ReactElement => {
   return (
-    <div className={clsx('my-12 grid gap-14 md:grid-cols-2 xl:grid-cols-4', className)}>
+    <div className={clsx('my-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4', className)}>
       {articles.map(article => (
         <NextLink
           key={article.link}
           href={article.link}
           className="
-          hocus:bg-neutral-200
-          hocus:dark:bg-[#24272E]
-          flex
-          cursor-pointer
-          flex-col
-          overflow-hidden
-          rounded-[20px]
-          bg-[#f1f1f1]
-          transition-colors
-          duration-300
-          hover:!no-underline
-          dark:bg-[#24272E]/50
-          lg:[:is(&:hover,&:focus)>img]:h-36
-          "
+            hocus:bg-neutral-200/60
+            hocus:dark:bg-[#2b2f37]/60
+            flex
+            cursor-pointer
+            flex-col
+            overflow-hidden
+            rounded-[20px]
+            bg-[#f1f1f1]/60
+            backdrop-blur-xl
+            backdrop-saturate-[1.3]
+            transition-colors
+            duration-300 [box-shadow:inset_2px_2px_8px_rgba(153,192,255,0.015),inset_-2px_-2px_8px_rgba(229,253,190,0.015)]
+            hover:!no-underline
+            hover:duration-0
+            dark:bg-[#24272E]/50
+            lg:[:is(&:hover,&:focus)>img]:h-36
+            "
         >
           <div className="flex grow flex-col p-5">
             <Heading size="md" className="line-clamp-3 [hyphens:auto]">

website/ui/components/newsletter.tsx

@@ -13,7 +13,7 @@ export const Newsletter = ({ className }: { className?: string }): ReactElement
   return (
     <div
       className={clsx(
-        'mb-16 flex gap-14 rounded-[30px] bg-[#f1f1f1] p-7 max-xl:flex-col md:p-24 lg:mb-32 xl:gap-48 dark:bg-[#24272E]/50',
+        'mb-10 flex gap-10 rounded-[30px] bg-[#f1f1f1]/60 p-7 backdrop-blur-xl backdrop-saturate-[1.3] [box-shadow:inset_2px_2px_8px_rgba(153,192,255,0.015),inset_-2px_-2px_8px_rgba(229,253,190,0.015)] max-xl:flex-col md:p-12 xl:gap-20 dark:bg-[#24272E]/50',
         className,
       )}
     >

website/ui/components/tag-list.tsx

@@ -15,7 +15,7 @@ const Tag = ({
     <Anchor
       href={href}
       className={clsx(
-        'rounded-md bg-gray-200 hover:!no-underline dark:bg-[#24272E]',
+        'rounded-md bg-gray-200 backdrop-blur-xl hover:!no-underline dark:bg-[#24272E]/80',
         'flex px-2.5 py-1.5 text-sm font-medium transition-colors',
         href
           ? 'hover:text-black hover:dark:bg-[#15AFD04C] hover:dark:text-[#82E9FF]'

website/ui/recommended-reading-section.tsx

@@ -9,8 +9,8 @@ export const RecommendedReadingSection = ({
   articles: MetaWithLink[];
 }): ReactElement => {
   return (
-    <div className="nextra-container py-16 lg:py-32">
-      <div className="md:mb-24 md:text-center">
+    <div className="nextra-container py-12 lg:py-20">
+      <div className="md:mb-12 md:text-center">
         <Heading>Recommended Reading</Heading>
         <p className="mb-3.5 text-[#7F818C] md:mb-[30px]">
           Read and follow the most popular blog in the GraphQL Ecosystem