From 127321893714287f0db30936f5274708468e3da1 Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Sun, 14 Apr 2024 02:46:12 +0200
Subject: [PATCH] 205 projects   individual mobile responsiveness (#272)

* style(frontend): :lipstick: Style project page, change the view from flex to grid

* style(frontend): :lipstick: style the grid in project page to make it more responsive

* refactor(frontend): :coffin: remove unecessary stylings

* style(frontend): :lipstick: add tailwind typography styling to cardtitle and preview text

* style(frontend): :lipstick: Add responsivness on blocksrenderer
---
 frontend/src/app/blog/[articleSlug]/page.tsx  |  4 +--
 .../src/app/projects/[projectSlug]/page.tsx   |  4 +--
 frontend/src/app/projects/page.tsx            | 27 ++++++++++---------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
index 5558f72..22ec4ba 100644
--- a/frontend/src/app/blog/[articleSlug]/page.tsx
+++ b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -85,9 +85,7 @@ export default async function Page({
 
     return (
         <div className="flex flex-col items-center gap-4">
-            <div className="w-1/2">
-                <BlockRendererClient content={content} />
-            </div>
+            <BlockRendererClient content={content} />
             <div className="flex w-1/2 flex-row items-center gap-1">
                 <div className="flex flex-1 justify-start gap-1">
                     {avatarURL && (
diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
index 8518853..aab3523 100644
--- a/frontend/src/app/projects/[projectSlug]/page.tsx
+++ b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -74,9 +74,7 @@ export default async function Page({
     }
     return (
         <div className="flex flex-col items-center gap-4">
-            <div className="w-1/2">
-                <BlockRendererClient content={content} />
-            </div>
+            <BlockRendererClient content={content} />
             {graphqlData.data.projects?.data[0].attributes?.satellites?.data
                 .length != 0 && (
                 <h1 className="mb-2 mt-2 text-xl font-bold">
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index a1fbf22..10f6795 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -70,7 +70,7 @@ export default async function ProjectsPage() {
                 </PageHeaderAndSubtitle>
             </div>
 
-            <div className="flex flex-wrap justify-center gap-4 md:justify-start">
+            <div className="grid grid-cols-1 gap-12 md:grid-cols-2 md:gap-16 lg:grid-cols-3 xl:grid-cols-4">
                 {graphqlData.data.projects.data.map((project) => {
                     let previewImage =
                         project?.attributes?.previewImage?.data?.attributes
@@ -81,14 +81,14 @@ export default async function ProjectsPage() {
                     }
                     return (
                         <Link
-                            className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
+                            className="h-full transition-transform duration-200 ease-in-out hover:scale-105 hover:transform sm:m-4"
                             href={"/projects/" + project?.attributes?.slug}
                             key={project.id}
                         >
-                            <Card className="md:w-68 flex h-full w-64 flex-col lg:w-72">
+                            <Card className="h-full w-full">
                                 <CardHeader></CardHeader>
                                 <CardContent>
-                                    <div className="h-64">
+                                    <div className="w-full">
                                         {previewImage ? (
                                             <Image
                                                 className="max-h-full max-w-full object-contain"
@@ -103,14 +103,17 @@ export default async function ProjectsPage() {
                                             </div>
                                         )}
                                     </div>
-                                    <CardTitle className="mb-2 mt-2 text-xl font-bold">
-                                        {project?.attributes?.title}
-                                    </CardTitle>
-                                    <p className="break-words">
-                                        {SlicePreviewText(
-                                            project?.attributes?.content ?? [],
-                                        )}
-                                    </p>
+                                    <div className="prose prose-invert">
+                                        <CardTitle className="mb-2 mt-6">
+                                            {project?.attributes?.title}
+                                        </CardTitle>
+                                        <p className="break-words">
+                                            {SlicePreviewText(
+                                                project?.attributes?.content ??
+                                                    [],
+                                            )}
+                                        </p>
+                                    </div>
                                 </CardContent>
                             </Card>
                         </Link>