refine for mobile view

hicsail · May 14, 2024 · 812741e · 812741e
1 parent 84c7078
commit 812741e
Showing 1 changed file with 17 additions and 30 deletions.
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
@@ -27,13 +27,13 @@ const Post: React.FC = () => {
   }, []);
 
   return (
-    <div className="flex items-center justify-center mt-28 mb-16 w-full">
+    <div className="flex items-center justify-center mt-28 mb-16 w-full md:px-12">
       <div className="max-w-7xl">
         <div className="mb-4">
-          <ol className="flex items-center whitespace-nowrap p-0">
+          <ol className="flex justify-start items-center whitespace-nowrap px-4 md:px-0 mb-16 md:mb-0">
             <li className="inline-flex items-center">
               <a
-                className="flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600"
+                className="flex items-center gap-2 text-lg md:text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600"
                 href="/discover"
               >
                 <svg
@@ -60,40 +60,32 @@ const Post: React.FC = () => {
                 xmlns="http://www.w3.org/2000/svg"
                 aria-hidden="true"
               >
-                <path
-                  d="M6 13L10 3"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                ></path>
+                <path d="M6 13L10 3" stroke="currentColor" strokeLinecap="round"></path>
               </svg>
             </li>
             <li
-              className="inline-flex items-center text-sm font-semibold text-gray-800 truncate"
+              className="inline-flex items-center text-lg md:text-sm font-semibold text-gray-800 truncate"
               aria-current="page"
             >
               Article
             </li>
           </ol>
         </div>
-        <div className="grid grid-cols-2 gap-8 mb-8">
-          <div className="flex flex-col justify-center gap-6">
-            <h2 className="text-2xl font-semibold font-sans mb-2 md:mb-1 md:text-4xl text-[#101066]">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 justify-items-center">
+          <div className="flex flex-col justify-center gap-4 w-[90%] md:w-full">
+            <h2 className="text-4xl md:text-3xl text-center md:text-left font-semibold font-sans text-[#101066]">
               {article?.attributes.title}
             </h2>
             {/* <p>{article?.description}</p> */}
             {/* place holder text */}
-            <p className="text-md tracking-wider text-[#101066]">
-              Explore our collection of informative mental health resources
-              designed to help teens navigate their emotional well-being and
-              find support.
+            <p className="text-md text-center md:text-left tracking-wider text-[#101066]">
+              Explore our collection of informative mental health resources designed to help teens navigate their
+              emotional well-being and find support.
             </p>
             {/* <span>{article?.attributes.author}</span> */}
-            <div className="flex text-md tracking-wider align-middle text-[#101066]">
+            <div className="flex text-sm md:text-md tracking-wider align-middle text-[#101066]">
               <div className="flex pr-4 gap-3">
-                <TwitterShareButton
-                  url={window.location.href}
-                  title={article?.attributes.title}
-                >
+                <TwitterShareButton url={window.location.href} title={article?.attributes.title}>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     x="0px"
@@ -106,10 +98,7 @@ const Post: React.FC = () => {
                     <path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"></path>
                   </svg>
                 </TwitterShareButton>
-                <FacebookShareButton
-                  url={window.location.href}
-                  title={article?.attributes.title}
-                >
+                <FacebookShareButton url={window.location.href} title={article?.attributes.title}>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     x="0px"
@@ -126,9 +115,7 @@ const Post: React.FC = () => {
               <div>{article?.attributes.author ?? "CYCM Team"}</div>
               <div className="px-2">&#183;</div>
               <div>
-                {new Date(
-                  article?.attributes.published_date
-                ).toLocaleDateString("en-US", {
+                {new Date(article?.attributes.published_date).toLocaleDateString("en-US", {
                   year: "numeric",
                   month: "long",
                   day: "numeric",
@@ -137,7 +124,7 @@ const Post: React.FC = () => {
             </div>
           </div>
 
-          <div className="flex items-center justify-center">
+          <div className="flex items-center justify-center px-4 md:px-0">
             {/* random image as placeholder */}
             <img src="https://picsum.photos/400/300" alt="random" />
             {/* <img src={article?.image} alt={article?.title} /> */}
@@ -163,7 +150,7 @@ const Post: React.FC = () => {
             />
           </svg>
         </div>
-        <div className="w-2/3 text-md tracking-wider text-[#101066] mb-16">
+        <div className="md:w-2/3 px-10 md:px-0 text-sm md:text-md tracking-wide md:tracking-wider text-[#101066] mb-16">
           <ReactMarkdown>{article?.attributes.body_markdown}</ReactMarkdown>
         </div>
       </div>