From f666c7e7828adda017bb30f29855766ea0e13eb4 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Wed, 6 Dec 2023 22:58:43 +0200
Subject: [PATCH] chore: amendments on mobile layout

---
 components/personal-projects.vue | 2 +-
 components/project.vue           | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/personal-projects.vue b/components/personal-projects.vue
index 4e2960a..461a718 100644
--- a/components/personal-projects.vue
+++ b/components/personal-projects.vue
@@ -2,7 +2,7 @@
   <UContainer class="flex flex-col gap-5">
     <div class="text-sm text-gray-500">Personal projects</div>
 
-    <div class="grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-5">
+    <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
       <Project
         title="Places for Zendesk"
         image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
diff --git a/components/project.vue b/components/project.vue
index 1d4f4d0..b2c9bdb 100644
--- a/components/project.vue
+++ b/components/project.vue
@@ -11,14 +11,14 @@ const props = defineProps<Props>();
 
 <template>
   <div
-    class="flex overflow-auto gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
+    class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
   >
     <ULink :to="props.url" target="_blank">
       <NuxtImg
         placeholder
         :src="props.image"
         :alt="props.title"
-        class="block w-16 h-16"
+        class="block min-w-[50px] w-[50px] md:w-16 h-[50px] md:h-16"
       />
     </ULink>
     <div class="grid row-span-3 gap-2">
@@ -29,11 +29,11 @@ const props = defineProps<Props>();
           target="_blank"
           >{{ props.title }}</ULink
         >
-        <div class="text-xs text-slate-600">
+        <div class="text-sm text-slate-500 md:text-xs">
           <slot name="subtitle"></slot>
         </div>
       </div>
-      <div class="text-sm md:block hidden">
+      <div class="text-sm md:block text-gray-600 hidden">
         <slot name="description">Lorem ipsum dorcet sit amet</slot>
       </div>
     </div>