style: 🎨

Author: khaykingleb

app/components/organisms/Carousel.tsx

@@ -13,23 +13,30 @@ export const Carousel = ({ items }: { items: Post[] }) => {
               key={item.id}
               className="carousel-item block w-full cursor-pointer transition-all duration-300 hover:bg-gray-100"
             >
-              <div className="w-full p-3">
-                <h2 className="font-gill-sans-semibold mb-1 text-lg">
-                  {item.title}
-                </h2>
-                <p className="font-gill-sans-regular mb-2 text-sm">
-                  Created at {item.publishDate.replace(/-/g, "/")}
-                </p>
-                <div className="font-gill-sans-regular">
-                  {item.tags.map((tag) => (
-                    <span
-                      key={tag}
-                      className="badge badge-ghost mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
-                    >
-                      {tag}
-                    </span>
-                  ))}
+              <div className="flex w-full p-3">
+                <div className="flex-grow">
+                  <h2 className="font-gill-sans-semibold mb-1 text-base sm:text-lg">
+                    {item.title}
+                  </h2>
+                  <p className="font-gill-sans-regular mb-2 text-sm">
+                    Created at {item.publishDate.replace(/-/g, "/")}
+                  </p>
+                  <div className="font-gill-sans-regular">
+                    {item.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="badge badge-ghost mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
                 </div>
+                <img
+                  src={item.imageUrl}
+                  alt={item.title}
+                  className="h-28 w-auto"
+                />
               </div>
             </Link>
           ))}

app/components/organisms/Header.tsx

@@ -15,7 +15,7 @@ export const Header = ({ backgroundImage }: HeaderProps) => {
         }}
       ></div>
       <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-black/20"></div>
-      <div className="font-gill-sans-bold relative z-10 mx-auto flex w-full max-w-[720px] items-center justify-between text-white">
+      <div className="font-gill-sans-bold relative z-10 mx-auto flex w-full max-w-[750px] items-center justify-between text-white">
         <span className="text-xl sm:text-2xl">~/khaykingleb</span>
         <nav className="hidden sm:block">
           <MenuItems />

app/routes/blog.$slug.tsx

@@ -153,7 +153,7 @@ export default function BlogPostRoute() {
     <div className="flex min-h-screen flex-col">
       <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
       <main className="flex-grow px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[720px] flex-col">
+        <div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[750px] flex-col">
           <Suspense fallback={<LoadingSpinner />}>
             <Await resolve={recordMap}>
               {(resolvedRecordMap: ExtendedRecordMap) => {

app/routes/blog._index.tsx

@@ -31,8 +31,11 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+const MAX_POSTS_PER_PAGE_DESKTOP = 4;
+const MAX_POSTS_PER_PAGE_MOBILE = 3;
+
 export default function BlogRoute() {
-  const [postsPerPage, setPostsPerPage] = useState(5);
+  const [postsPerPage, setPostsPerPage] = useState(MAX_POSTS_PER_PAGE_DESKTOP);
   const [currentPage, setCurrentPage] = useState(0);
   const [tagOptions, setTagOptions] = useState(
     Array.from(new Set(posts.flatMap((post) => post.tags)))
@@ -62,9 +65,9 @@ export default function BlogRoute() {
   useEffect(() => {
     const updatePostsPerPage = () => {
       if (window.matchMedia("(min-height: 800px)").matches) {
-        setPostsPerPage(5);
+        setPostsPerPage(MAX_POSTS_PER_PAGE_DESKTOP);
       } else {
-        setPostsPerPage(3);
+        setPostsPerPage(MAX_POSTS_PER_PAGE_MOBILE);
       }
     };
 
@@ -89,7 +92,7 @@ export default function BlogRoute() {
     <div className="flex min-h-screen flex-col">
       <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
       <main className="flex flex-grow flex-col px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto flex h-full w-full max-w-[720px] flex-grow flex-col">
+        <div className="mx-auto flex h-full w-full max-w-[750px] flex-grow flex-col">
           <TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />
           <div className="flex-grow">
             <Carousel