fix responsive bug

Author: AliNikseresht

src/index.css

@@ -34,7 +34,7 @@ body {
 }
 
 .c-gray {
-  color: #6f6f6f;
+  color: #8b8b8b;
 }
 
 .c-red {

src/layout/Layout.tsx

@@ -7,13 +7,13 @@ const Layout = () => {
   return (
     <div className="flex h-screen">
       <Sidebar />
-      <div className="flex flex-col w-full">
+      <div className="flex flex-col w-full p-4">
         <div className="flex-1 h-full overflow-auto">
           <Outlet />
         </div>
         <Footer />
+        <MenuMobile />
       </div>
-      <MenuMobile />
     </div>
   );
 };

src/pages/Home/Home.tsx

@@ -46,17 +46,17 @@ const Home = () => {
   }
 
   return (
-    <div className="flex flex-col p-[3em] gap-[2em]">
-      <div className="flex flex-col items-center w-10">
+    <div className="flex flex-col p-[0em] md:p-[3em] gap-[2em]">
+      <div className="flex flex-col items-center md:w-10">
         <div className="w-4 h-0.5 bc-green"></div>
         <h1>Latest</h1>
       </div>
       {blogs.length === 0 ? (
         <p className="text-center text-lg font-medium">There is no blog.</p>
       ) : (
         blogs.map((blog) => (
-          <div key={blog.id} className="flex items-start h-[13rem] mb-4">
-            <div className="flex flex-col items-start justify-between relative h-44">
+          <div key={blog.id} className="flex items-start md:h-[13rem] mb-4">
+            <div className="hidden md:flex flex-col items-start justify-between relative h-44">
               <p className="text-left text-3xl uppercase font-semibold w-20">
                 {new Date(blog.createdAt.seconds * 1000).toLocaleDateString(
                   "en-GB",
@@ -66,18 +66,35 @@ const Home = () => {
                   }
                 )}
               </p>
-              <p className="-rotate-90 absolute -left-6 bottom-5 text-xs w-36 text-center">
+              <p className="-rotate-90 absolute -left-6 bottom-5 text-xs w-36 text-center c-gray">
                 {blog.author}
               </p>
             </div>
-            <div className="flex flex-col justify-between h-full">
-              <h2 className="c-green text-3xl font-semibold">{blog.title}</h2>
-              <p className="text-sm my-3">{blog.content}</p>
-              <div>
+            <div className="flex flex-col justify-between h-full w-full">
+              <h2 className="c-green md:text-3xl font-semibold">
+                {blog.title}
+              </h2>
+              <p className="text-xs md:text-sm my-3">{blog.content}</p>
+              <div className="flex md:hidden items-center justify-between mb-3">
+                <p className="text-left text-sm uppercase font-semibold ">
+                  {new Date(blog.createdAt.seconds * 1000).toLocaleDateString(
+                    "en-GB",
+                    {
+                      day: "numeric",
+                      month: "short",
+                      year:"numeric"
+                    }
+                  )}
+                </p>
+                <p className="text-center text-sm c-gray">
+                  {blog.author}
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2">
                 {blog.tags.map((tagItem, index) => (
                   <span
                     key={index}
-                    className="border border-green mx-1 px-2 py-1 text-xs rounded-full c-green"
+                    className="border border-green px-2 py-1 text-xs rounded-full c-green"
                   >
                     #{tagItem}
                   </span>