🔖 - Version 1.2.2 (#29)

claudiocoder · web-flow · commit 10db26db5304 · 2024-02-16T23:14:57.000-06:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,12 +16,12 @@ export default function RootLayout({
   return (
     <html lang='es'>
       <body className={_roboto.className}>
-        <div className='my-4 sm:p-5 sm:pl-5 h-screen'>
-          <div className='flex flex-col sm:flex-row column w-full'>
-            <div className='w-full sm:w-1/5 flex justify-center mb-8'>
+        <div className='my-4 lg:p-5 lg:pl-5 h-screen'>
+          <div className='flex flex-col lg:flex-row column w-full'>
+            <div className='w-full lg:w-1/5 flex justify-center mb-4'>
               <ProfileContainer />
             </div>
-            <div className='w-full sm:w-4/5 flex justify-center sm:justify-start'>
+            <div className='w-full lg:w-4/5 flex justify-center lg:justify-start'>
               <div className='w-[100%]'>{children}</div>
             </div>
           </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -18,9 +18,9 @@ export default function Home() {
 
   return (
     <>
-      <div className='sm:m-8 mx-4'>
+      <div className='sm:m-8 mx-4 my-2'>
         <h1 className='mb-6 sm:mb-8 text-3xl font-black'>Blog</h1>
-        <div className='flex flex-wrap gap-5'>
+        <div className='flex flex-wrap gap-5 m-auto'>
           {posts.map((post, idx) => (
             <PostCard key={idx} {...post} />
           ))}
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
@@ -6,7 +6,7 @@ import { _roboto } from '@/utils/fonts'
 
 const PostCard = (post: Blog) => {
   return (
-    <div className='w-[100%] sm:w-[40%] shadow-[0_5px_15px_rgba(0,0,0,0.35)] rounded-md flex items-center bg-slate-50 rounded-l-lg'>
+    <div className='w-[100%] md:w-[80%] lg:w-[60%] shadow-[0_5px_15px_rgba(0,0,0,0.35)] rounded-md flex items-center bg-slate-50 rounded-l-lg max-h-[180px]'>
       <div className='rounded-l-lg'>
         <Image
           width={180}
@@ -16,9 +16,9 @@ const PostCard = (post: Blog) => {
           className='rounded-l-lg'
         />
       </div>
-      <div className='flex flex-col items-start px-3'>
+      <div className='flex flex-col items-start justify-between px-3 w-full h-full'>
         <h2
-          className={`${_roboto.className} mb-5 text-base sm:text-xl font-bold w-full text-left`}
+          className={`${_roboto.className} my-5 text-base sm:text-xl font-bold w-full text-left`}
         >
           <Link href={post.slug}>{post.title}</Link>
         </h2>
